<template>
    <div class="container pt-4 pb-5">
        <div class="row pa-2">
            <div class="col-12 col-md-12 col-lg-12 pl-4">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12 col-sm-12 col-md-4 col-lg-4 ">
                                <h5>Reports</h5>
                            </div>
                            <div class="col-12 col-sm-12 col-md-8 col-lg-8">
                                <div class="row justify-content-center align-items-center">
                                    <div class="col-12 col-sm-12 col-md-4 col-lg-4 mb-2">
                                        <multiselect
                                            v-model="filters.selected_object_id"
                                            :options="object_datas"
                                            label="name"
                                            placeholder="Select Objects"
                                            :multiple="true"
                                            :clear-on-select="true"
                                            track-by="id"
                                            @input="onChangeObject"
                                        >
                                        </multiselect>
                                    </div>
                                    <date-picker  v-model="filters.start_date"
                                        format="YYYY-MM-DD"
                                        type="date"
                                        placeholder="Select start date"
                                        class="col-12 col-sm-12 col-md-4 col-lg-4 mb-2"
                                    >
                                    </date-picker>
                                    <date-picker  v-model="filters.end_date"
                                        format="YYYY-MM-DD"
                                        type="date"
                                        placeholder="Select end date"
                                        @change="onChangeDate()"
                                        class="col-12 col-sm-12 col-md-4 col-lg-4 mb-2"

                                    >
                                    </date-picker>
                                    <div v-if="auth_user.type === 'admin'" class="col-12 col-sm-12 col-md-5 col-lg-5 mb-3">
                                        <input type="file" ref="files" style="display: none" @input="onImport">
                                        <button @click="$refs.files.click()" class="col-12 btn btn-primary bg-primary text-white">Import Data</button>
                                    </div>
                                    <div  class="col-12 col-sm-12 col-md-5 col-lg-5 mb-3">
                                        <button @click="exportData()" class="col-12 btn btn-primary bg-primary text-white">Excel Export</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 col-md-12 col-lg-12">
                            <div class="table-responsive p-2">
                                <table style="font-size: .9rem; margin-bottom: 0;" class="table table-sm">
                                    <thead class="thead-light pt-3 pb-3">
                                        <tr>
                                            <th style="vertical-align: middle;">Object Name</th>
                                            <th style="vertical-align: middle;">Time A</th>
                                            <th style="vertical-align: middle;">Position A</th>
                                            <th style="vertical-align: middle;">Time B</th>
                                            <th style="vertical-align: middle;">Position B</th>
                                            <th style="vertical-align: middle;">Duration</th>
                                            <th style="vertical-align: middle;">Length</th>
                                            <th style="vertical-align: middle;">Fuel Consumption</th>
                                            <th style="vertical-align: middle;">Avg.fuel cons. (100km)</th>
                                            <th style="vertical-align: middle;">Fuel Cost</th>
                                            <th style="vertical-align: middle;">Driver</th>
                                            <th style="vertical-align: middle;">Object Location</th>
                                            <!-- <th style="vertical-align: middle;" class="text-right">Actions</th> -->
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="report in report_datas.data" :key="report.id">
                                            <td style="vertical-align: middle;">{{  report.object_details ? report.object_details.name : '' }}</td>
                                            <td style="vertical-align: middle;">{{  report.start_time }}</td>
                                            <td style="vertical-align: middle;">{{  report.start_position }}</td>
                                            <td style="vertical-align: middle;">{{  report.end_time }}</td>
                                            <td style="vertical-align: middle;">{{  report.end_position }}</td>
                                            <td style="vertical-align: middle;">{{  report.duration }}</td>
                                            <td style="vertical-align: middle;">{{  report.length }} km</td>
                                            <td style="vertical-align: middle;">{{  report.fuel_consumption }} liters</td>
                                            <td style="vertical-align: middle;">{{  report.avg_fuel_consumption }} liters</td>
                                            <td style="vertical-align: middle;">{{  report.fuel_cost }} EUR</td>
                                            <td style="vertical-align: middle;">{{  report.driver }}</td>
                                            <td style="vertical-align: middle;">{{  report.trailer }}</td>
                                            <!-- <td style="vertical-align: middle;" class="text-right">
                                                <form id="deleteForm" action="#" method="post">
                                                    @csrf
                                                    @method('delete')
                                                    <div class="m-0 row justify-content-end">
                                                        <button type="button" class="btn btn-danger bg-danger btn-sm text-white" onClick="DeleteConfirm()" data-original-title=""><ion-icon name="trash"></ion-icon></button>
                                                    </div>
                                                </form>
                                            </td> -->
                                        </tr>
                                    </tbody>
                                </table>
                                
                            </div>
                            <div class="d-flex justify-content-center">
                                <pagination size="default" :limit="5" :data="report_datas" @pagination-change-page="getResults"></pagination>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <notifications position="top right" :closeOnClick="true"/>
    </div>
</template>

<script>
import DatePicker from 'vue2-datepicker';
import 'vue2-datepicker/index.css';
 import Multiselect from 'vue-multiselect'
import 'vue-multiselect/dist/vue-multiselect.min.css';
export default {
    components: { DatePicker , Multiselect },
    props:{
       object_datas: {
           type: Array,
           default: [],
       },
       auth_user: {
           type: Object,
           default: {},
       }
    },
    data (){
        return{
           report_datas: [],
           filters: {
               selected_object_id: [],
               start_date: null,
               end_date: null,
           }
        }
    },
    created() {
        this.getResults();
    },
    mounted(){
        // this.reports = this.report_datas;
    },
    methods:{
        onChangeObject(){
            let params = {}
            params = {
                selected_object_id: this.filters.selected_object_id,
                start_date: this.filters.start_date?.toLocaleString(),
                end_date: this.filters.end_date?.toLocaleString(),
            };

            axios
                .get(`/report`,{params: params})
                .then(response => {
                    this.report_datas = response.data;
                })
                .catch(error => {
                })
        },
        onChangeDate(){
            let params = {}
            params = {
                start_date: this.filters.start_date?.toLocaleString(),
                end_date: this.filters.end_date?.toLocaleString(),
                selected_object_id: this.filters.selected_object_id,

            };

            axios
            .get(`/report`,{params: params})
            .then(response => {
                this.report_datas = response.data;
            })
            .catch(error => {
            })

        },
        onImport(event){
            console.log("import button clicked");
            let formData = new FormData()
            let file = event.target.files[0];
            formData.append('file', file)

            axios
                .post('/import-report', formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    },
                })
                .then(res => {
                    this.$refs.files.value=null
                    this.getResults();
                    this.$notify({
                        title: 'Import',
                        type: 'success',
                        text: 'Import Successfull',
                        duration: 10000,
                    });
                })
                .catch(err => {
                    this.$notify({
                        title: 'Import',
                        type: 'error',
                        text: err.message,
                        duration: 10000,
                    });
                    this.$refs.files.value=null
                })
        },
        getResults(page = 1) {
            let params = {};

            params = {
                page: page,
                start_date: this.filters.start_date?.toLocaleString(),
                end_date: this.filters.end_date?.toLocaleString(),
                selected_object_id: this.filters.selected_object_id,

            };

            axios
            .get(`/report`,{params: params})
            .then(response => {
                this.report_datas = response.data;
            })
            .catch(err => {
                console.log(err)
            })
        },
        exportData(){
            let params = {}
            params = {
                selected_object_id: this.filters.selected_object_id,
                start_date: this.filters.start_date?.toLocaleString(),
                end_date: this.filters.end_date?.toLocaleString(),
            };

            console.log("export button clicked");

            axios
                .get('/export-report',{params: params})
                .then(response => {
                    // console.log(response);

                    window.open(response.data.tempUrl, '_system');
                })
                .catch(error => {
                    console.log(error.message);
                })
        }
    }
}
</script>
