<template>
    <theme-table :noneActions="true">
        <span slot="main-title">
            {{ $t('Daily Report') }}
        </span>
        <template slot="more-button">
            <button class="btn btn-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">{{$t('Filter')}}</button>
            <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
                <div class="offcanvas-header">
                    <h5 class="offcanvas-title" id="offcanvasRightLabel">{{$t('Filter')}}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                </div>
                <div class="offcanvas-body">
                    <div class="mb-3">
                        <label class="form-label">{{ $t('Client') }}</label>
                        <Multiselect mode="tags" :close-on-select="false" v-model="params.client_id" trackBy="name" value="id" label="name" :searchable="true" :options="clients" />
                    </div>
                    <div class="mb-3">
                        <label class="form-label">{{ $t('Co') }}</label>
                        <Multiselect mode="tags" :close-on-select="false" v-model="params.co_id" trackBy="name" value="id" label="name" :searchable="true" :options="coes" />
                    </div>
                    <div class="list-group mb-3">
                        <button type="button" class="btn btn-success" @click="funGetData"><i class="fa fa-search"></i> {{ $t('Search') }}</button>
                    </div>
                    <div class="list-group mb-3">
                        <button type="button" @click="printP" class="btn btn-primary"><i class="fa fa-print"></i> {{ $t('Print') }}</button>
                    </div>
                    <!-- <div class="list-group mb-3">
                        <button type="button" @click="exportExcell" class="btn btn-danger"><i class="fa fa-file-export"></i> {{ $t('Export') }}</button>
                    </div> -->
                </div>
            </div>
        </template>
        <div slot="body">
            <div id="show-print">
                <div class="table-responsive table_scroll report_print">
                    <header-report :title="$t('Daily Report')" :date="current_date" :date_title="'ថ្ងៃប្រមូលប្រាក់'" :type="1" style="display: none;"></header-report>
                    <table class="table table-bordered m-0">
                        
                        <thead class="text-nowrap fixed_table">
                            <tr>
                                <th>{{ $t("#") }}</th>
                                <th>{{ $t("Client Name") }}</th>
                                <th>{{ $t("Client Number") }}</th>
                                <th>{{ $t("Village") }}</th>
                                <th>{{ $t("CO Name") }}</th>
                                <th>{{ $t("Payment Date") }}</th>
                                <th>{{ $t("Principal") }}</th>
                                <th>{{ $t("Interest") }}</th>
                                <th>{{ $t("Operating Services") }}</th>
                                <th>{{ $t("Payment") }}</th>
                                <th>{{ $t("Received") }}</th>
                                <th>{{ $t("Unreceive") }}</th>
                                <th>{{ $t("Other") }}</th>
                            </tr>
                        </thead>
                        <tbody class="text-nowrap">
                            <tr v-for="(val,index) in dailyData.data">
                                <td>{{ index + 1 }} </td>
                                <td>{{ val.client_name}}</td>
                                <td>{{ val.client_phone}}</td>
                                <td>{{ val.village}}</td>
                                <td>{{ val.co_name}}</td>
                                <td>{{ val.payment_date | onlyDate}}</td>
                                <td>{{ val.principal | numberFomartValue }}</td>
                                <td>{{ val.interest_per_month | numberFomartValue }}</td>
                                <td>{{ val.operating_service | numberFomartValue }}</td>
                                <td>{{ val.payment_per_month | numberFomartValue }}</td>
                                <td>{{ val.received | numberFomartValue }}</td>
                                <td>{{ val.unreceived | numberFomartValue }}</td>
                                <td></td>
                            </tr>
                            <tr class="c_bg_tfoot">
                                <td colspan="6" class="text-end"><strong>{{$t('Total')}}</strong></td>
                                <td>{{totalPrincipal | numberFomartValue}}</td>
                                <td>{{totalInterest | numberFomartValue}}</td> 
                                <td>{{totalOperatService | numberFomartValue}}</td>
                                <td>{{totalPayment | numberFomartValue}}</td>
                                <td>{{totalReceived | numberFomartValue}}</td>
                                <td>{{totalUnreceived | numberFomartValue}}</td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                    <footer-report style="display: none;"></footer-report>
                </div>
            </div>
            <cumstom-pagination :pageShow="true" @PageChange="PageChange($event)" :data="dailyData" @onChangePage="funGetData($event)"></cumstom-pagination>
        </div>
    </theme-table>
</template>
<script>
    import moment from "moment";
    import CumstomPagination from "../../components/CustomPagination.vue";
    import HeaderReport from "../../components/report/header.vue";
    import FooterReport from "../../components/report/footer.vue";
    import ThemeTable from "../../components/ThemeTable.vue";
    export default {
        components: {
            CumstomPagination,
            HeaderReport,
            FooterReport,
            ThemeTable
        },
        data() {
            return {
                moment: moment,
                format: "YYYY-MM-DD",
                dailyData: { data: [] },
                current_date: new Date().toISOString(),
                clients: [],
                coes: [],
                form: new Form({
                   
                }),
                params: {
                    page: 1,
                    per_page: 25,
                    search_text: "",

                    client_id: [],
                    co_id: [],
                    date : '',
                    deatail: 1,
                    loan_status_id:2,
                    client_type:1,
                },
            };
        },
        created() {
            this.funGetData();
            this.getClient();
            this.getCO();
        },
        methods: {
            getClient() {
                axios
                    .get("admin-api/com-client")
                    .then((res) => {
                        this.clients = res.data;
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            },
            getCO() {
                axios
                    .get("admin-api/com-co")
                    .then((res) => {
                        this.coes = res.data;
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            },
            funGetData(page = 1) {
                this.params.page = page;
                axios.get("admin-api/daily-report", {
                    params: this.params,
                }).then((res) => {
                    this.dailyData = res.data;
                }).catch((error) => {
                    if (error.message == "Request failed with status code 403") {
                        this.$router.push({ name: "permissionTest" });
                    } else {
                        console.log(error.message);
                    }
                });
            },
            PageChange: function (e) {
                this.params.per_page = e.target.value;
                this.funGetData();
            },
            printP() {
                this.$htmlToPaper("show-print");
            },
            // exportExcell() {
            //     axios({
            //         url: "admin-api/ExportCollection",
            //         method: "GET",
            //         responseType: "blob",
            //         params: this.params,
            //     }).then((response) => {
            //         var fileURL = window.URL.createObjectURL(new Blob([response.data]));
            //         var fileLink = document.createElement("a");
            //         fileLink.href = fileURL;
            //         fileLink.setAttribute("download", "ExportCollection.xlsx");
            //         document.body.appendChild(fileLink);
            //         fileLink.click();
            //     });
            // },
        },
        computed:{
            totalPrincipal: function () {
                var sum = 0;
                this.dailyData.data.forEach(function (item) {
                    sum += parseFloat(item.principal);
                });
                return sum;
            },
            totalInterest: function () {
                var sum = 0;
                this.dailyData.data.forEach(function (item) {
                    sum += parseFloat(item.interest_per_month);
                });
                return sum;
            },
            totalOperatService: function () {
                var sum = 0;
                this.dailyData.data.forEach(function (item) {
                    sum += parseFloat(item.operating_service);
                });
                return sum;
            },
            totalPayment: function () {
                var sum = 0;
                this.dailyData.data.forEach(function (item) {
                    sum += parseFloat(item.payment_per_month);
                });
                return sum;
            },
            totalReceived: function () {
                var sum = 0;
                this.dailyData.data.forEach(function (item) {
                    sum += parseFloat(item.received);
                });
                return sum;
            },
            totalUnreceived: function () {
                var sum = 0;
                this.dailyData.data.forEach(function (item) {
                    sum += parseFloat(item.unreceived);
                });
                return sum;
            },
        }
    };
</script>