<template>
    <div class="row parentContainer">
        <div class="col">
            <div class="row" v-if="!returnData">
                <div class="col">
                    <div class="row m-b-20">
                        <div class="col">
                            <div class="btn btn-sm btn-primary rounded b-rad-none"
                                @click="isUploadingCsv = !isUploadingCsv">{{ isUploadingCsv ? "Cancel" : "Upload Excel" }}
                            </div>
                            <div class="btn btn-sm btn-primary rounded b-rad-none requestModal"
                                data-type="addPermitsReminder" v-if="!isUploadingCsv"><i class="fa fa-plus m-r-5"></i>Add
                                Permits</div>
                            <modal-component class="animate__animated animate__fast animate__fadeIn"
                                type="addPermitsReminder">
                                <add-permits-reminder-form-component
                                    :section="section"></add-permits-reminder-form-component>
                            </modal-component>
                            <div class="btn btn-sm btn-default rounded b-rad-none" @click="refreshData"><i class="fa fa-refresh"></i></div>
                        </div>
                    </div>
                    <div class="row m-b-50" v-if="isUploadingCsv">
                        <div class="col-12 col-md-6">
                            <div class="row bg-white">
                                <div class="col">
                                    <file-input-component :validator="$v.files" v-model="files">
                                        <template slot="label">
                                            <div class="font-heading fs-11 all-caps">Permits Reminder Csv</div>
                                            <div class="fs-8 all-caps d-block m-t-10"><a :href="excelFileUrl" download>Click
                                                    HERE to download the template</a></div>
                                        </template>
                                    </file-input-component>
                                </div>
                            </div>
                            <div class="row m-t-20">
                                <div class="col">
                                    <div class="row">
                                        <div class="col">
                                            <button type="button"
                                                class="btn btn-block p-t-10 p-b-10 p-r-35 p-l-35 btn-success b-rad-none"
                                                @click="submitForm">Upload</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-else>
                        <div class="font-heading fs-16 all-caps bold m-b-15">Permits Reminder</div>
                        <list-component :key="key" :section="section" :endpoint="route('api.permits_reminder.list')">
                            <template slot="list" slot-scope="{data}">
                                <permits-reminder-item-component :data="data"
                                    :section="section"></permits-reminder-item-component>
                            </template>
                        </list-component>
                    </div>
                </div>
            </div>
            <div v-if="returnData">
                <div class="font-heading fs-16 all-caps bold m-b-15">Upload Summary</div>
                <div class="font-heading fs-12 all-caps bold">Total Completed Rows: {{ returnData.completedRows }}</div>
                <div class="font-heading fs-12 all-caps bold m-b-15">Total Failed Rows: {{ returnData.failedRows }}</div>
                <div v-if="returnData.failedRows">
                    <div class="font-heading fs-12 all-caps m-b-15">Please copy error below into a excel file and try again
                        after it has been corrected.</div>
                    <table class="w-100 table table-bordered">
                        <tr>
                            <th class="text-capitalize" v-for="key in returnDataKeys"> {{ key }}</th>
                        </tr>
                        <tr v-for="row in returnData.data">
                            <td v-for="col in row" :class="[{ 'text-danger': row['status'] == 'failed' }]">
                                {{ col }}
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="fs-12 font-arial m-b-0 pointer bold m-t-20 text-primary" @click="refreshData()">Click here to
                    refresh</div>
            </div>
        </div>
    </div>
</template>
<script>
import { required } from "vuelidate/lib/validators";

export default {
    props: {
        section: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            files: [],
            parameters: {},
            returnData: null,
            data: null,
            key: 1,
            isUploadingCsv: false,
        }
    },
    computed: {
        returnDataKeys() {
            return this.returnData ? Object.keys(Object.assign({}, this.returnData.data[0])) : 0;
        },
        excelFileUrl() {
            return `${window.location.origin}/` + 'excel-templates/permits_reminder_template.xlsx';
        }
    },
    validations: {
        files: {
            required
        },
    },
    methods: {
        submitForm() {
            this.parameters = {
                files: this.files,
            };
            this.submit(this.route('api.permits_reminder.upload'), 'post', this.section, true, true);
        },
        errorHandler(error) {
            console.log(error);
        },
        successHandler(response) {
            console.log(response);
            this.returnData = response;
        },
        refreshData() {
            this.returnData = null;
            this.isUploadingCsv = false;
            this.key++;
        }
    },
}

</script>