<template>
    <div class="main-container">
        <Toolbar />
        <div class='loading-container' v-if='showLoader'>
            <div class='loading-wrapper'>
                <div class='loader'></div>
            </div>
        </div>
        <div class="upload-docs-container" align="center" v-if="!showUpload && !showDocPreview">
            <div class="top-div">
                <img src="./assets/ilus.svg"/>
                <div class="title-div">
                    Upload Documents
                </div>
                <div class="subtitle-div">
                    You need to upload below documents before we can deliver your car
                </div>
            </div>
            <div class="api-error-div" v-if="apiErrorMessage">
                Following error occurred while uploading document:
                <br/>
                <ul><li>
                    {{apiErrorMessage}}
                </li></ul>
            </div>
            <div class="api-error-div" v-if="rejectionMsgBody">
                Following documents have been rejected. Please remove and upload again:
                <br/>
                <ul><li :key='index' v-for="(doc_type, index) in rejectionMsgBody">
                    {{doc_type.document_type}} : {{doc_type.reason_of_rejection}}
                </li></ul>
            </div>
            <card-item :key="item" v-for="item in Object.keys(documentTypes.mandatory)" :text="item.replace('_',' ')" 
                 :itemId="item" :iconUrl="item" mandatory="true" :count="documentTypes.mandatory[item]"
            />
            <card-item :key="item" v-for="item in Object.keys(documentTypes.optional)" :text="item.replace('_',' ')" 
                 :itemId="item" :iconUrl="item" mandatory="false" :count="documentTypes.optional[item]"
            />
            <div class="button-wrapper" @click="handleSubmitClick" v-if="!docUploadDone">
                <div :class="(submitEnabled) ? 'button-div enabled' : 'button-div'">SUBMIT DOCUMENTS</div>
            </div>
            <div class="back-div" @click="handleBackClick">
                BACK TO DASHBOARD
            </div>
        </div>
        <upload-screen v-if="showUpload"/>
        <div class="docPreview" v-if="showDocPreview && docUrl">
            <div class="image-wrapper">
                <img :src="docUrl"/>
                <div @click="closeDocPreview">X</div>
            </div>
        </div>
    </div>
</template>
<script>
import uploadDocumentsPage from './upload-documents';
export default uploadDocumentsPage;
</script>
<style type="text/css">
    .footer-content {
        display: none;
    }
</style>