<template>
    <div class="row text-left">
        <div class="col">
            <div class="row">
                <div class="col">
                    <div class="b-l b-success p-l-15 m-b-15" style="border-left-width: 3px;">
                        <h6 class="bold all-caps no-margin text-success">Identification Verification</h6>
                        <div class="muted all-caps fs-12">Update your identification document</div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <validation-wrapper-component :validator="$v.parameters.reference">
                        <label class="muted">{{ this.company.type === 0 ? 'IC/Passport Number' : 'Company Registration Number'}}</label>
                        <input class="form-control" name="reference" v-model="parameters.reference">
                    </validation-wrapper-component>
                    <div class="row">
                        <div class="col">
                            <file-input-component :validator="$v.parameters.files" v-model="parameters.files">
                                <template slot="label">
                                    <div class="font-heading fs-11 text-primary all-caps">{{ company.type === 0 ? 'IC Photo' : 'SSM Registration Photo' }}</div>
                                </template>
                                <template slot="tips">
                                    <div class="row">
                                        <div class="col">
                                            <div class="row m-b-20">
                                                <div class="col">
                                                    <div class="font-heading fs-11 text-warning m-b-10">{{ company.type === 0 ? 'IC': 'SSM registration'}} number shown in the photo should tally with {{ company.type === 0 ? 'IC': 'SSM registration'}} number provided above.</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </file-input-component>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row m-b-15 m-t-20">
                <div class="col">
                    <div class="row">
                        <div class="col text-right">
                            <button type="button" class="btn btn-outline-dark float-left" @click="closeModal()">Cancel</button>
                            <button type="button" class="btn btn-success" @click="submitForm()">Submit</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import { required, minLength } from "vuelidate/lib/validators";
    export default {
        props: {
            company: {
                type: Object,
                required: true
            },
            section:{
                type: String,
                required: true
            },
        },
        watch: {
            'company': function() {
                this.parameters.company_id = this.company.id;
            }
        },
        data() {
            return {
                parameters : {
                    company_id: this.company.id,
                    files: [],
                    reference: ''
                }

            }
        },
        validations: {
            parameters: {
                files: {
                    required,
                    minLength: minLength(1)
                },
                reference: { required }
            }
        },
        methods:{
            submitForm(){
                this.submit((this.route('api.company.document.identification.update', this.company.id)), 'post', 'identification.form', true, true)
            },
            successHandler(){
                this.crudSuccess();
                EventBus.$emit('updateDocument')
            }
        }
    }
</script>
