
<template>
    <div class="row flex-wrap-reverse">
        <div class="col-xl-9 col-12">
            <theme-table :noneActions="true">
                <div slot="body" style="overflow: auto; height: calc(100vh - 135px);">
                    <div class="header py-1">
                        <p class="text-center title_km h5 text_moul">របាយការណ៍បិទបញ្ជីប្រចាំថ្ងៃ</p>
                        <p class="text-center title_km h6 text_moul">
                            <span v-if="params.today==''">{{funCurrentDate(params.now)}}</span>
                            <span v-else>{{funCurrentDate(params.today)}}</span>
                        </p>
                    </div>
                    <div id="show-print">
                        <div class="report_print">
                            <header-report :title="'របាយការណ៍បិទបញ្ជីប្រចាំថ្ងៃ'" :type="1" :date_title="params.today==''?'':'បិទបញ្ជី'" :date="params.today==''?params.now:params.today" style="display: none;"></header-report>
                            <div class="row mx-0 title text-center mb-1">
                                <div class="col-12" v-if="params.co_id!=null">
                                    <p>មន្ត្រីឥណទាន៖ {{dataPayments['co_name']}}</p>
                                </div>
                                <div class="col-12" v-else>
                                    <p>សម្រាប់សាខា៖ {{dataPayments['branch_name']}}</p>
                                </div>
                            </div>
                            <table class="table table-bordered">
                                <tbody>
                                    <tr v-if="params.co_id==null">
                                        <td>
                                            <div class="d-flex justify-content-between" >
                                                <div class="row w-100">
                                                    <div class="col-3 text-start text-nowrap submain-color">ដើមគ្រា</div>
                                                    <div class="col-9 text-end text-nowrap submain-color">{{ dataPayments['totalOriginalAmount'] | numberFomartValue }}</div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="d-flex justify-content-between">
                                                <div class="row w-100">
                                                    <div class="col-3 text-start text-nowrap main-color">{{ $t('Total Loan Disbursed') }}</div>
                                                    <div class="col-9 text-end text-nowrap main-color">{{dataPayments['LoanDisbursed'] | numberFomartValue}}</div>

                                                    <div v-for="(val,index) in dataPayments['arr_loan_disburst']" :key="index" class="text-secondary text-end">
                                                        <div class="row">
                                                            <div class="col-6">
                                                                <strong>{{val.chart_code_name}}</strong>
                                                            </div>
                                                            <div class="col-6">
                                                                <strong>{{val.loan_out | numberFomartValue}}</strong>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="d-flex justify-content-between">
                                                <div class="row w-100">
                                                    <div class="col-3 text-start text-nowrap main-color">{{ $t('Total Received') }}</div>
                                                    <div class="col-9 text-end text-nowrap main-color">{{dataPayments['TotalReceived'] | numberFomartValue}}</div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="d-flex justify-content-between">
                                                <div class="row w-100">
                                                    <div class="col-1"></div>
                                                    <div class="col-4 text-start text-nowrap sub-color">{{ $t('Total Service') }}</div>
                                                    <div class="col-7 text-end text-nowrap sub-color">{{dataPayments['totalService'] | numberFomartValue}}</div>

                                                    <div v-for="(val,index) in dataPayments['arr_loan_disburst']" :key="index" class="text-secondary text-end">
                                                        <div class="row" v-show="val.total_service>0">
                                                            <div class="col-6">
                                                                <strong>{{val.chart_code_name}}</strong>
                                                            </div>
                                                            <div class="col-6">
                                                                <strong>{{val.total_service | numberFomartValue}}</strong>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <!-- <tr>
                                        <td>
                                            <div class="d-flex justify-content-between">
                                                <div class="row w-100">
                                                    <div class="col-1"></div>
                                                    <div class="col-4 text-start text-nowrap sub-color">{{ $t('Total Insurance') }}</div>
                                                    <div class="col-7 text-end text-nowrap sub-color">{{dataPayments['totalInsurance'] | numberFomartValue}}</div>

                                                    <div v-for="(val,index) in dataPayments['arr_loan_disburst']" :key="index" class="text-secondary text-end">
                                                        <div class="row" v-show="val.total_insurance>0">
                                                            <div class="col-6">
                                                                <strong>{{val.chart_code_name}}</strong>
                                                            </div>
                                                            <div class="col-6">
                                                                <strong>{{val.total_insurance | numberFomartValue}}</strong>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr> -->
                                    <!-- ទឹកប្រាក់ប្រមូលប្រចាំថ្ងៃសរុប -->
                                    <tr>
                                        <td>
                                            <div class="d-flex justify-content-between">
                                                <div class="row w-100">
                                                    <div class="col-1"></div>
                                                    <div class="col-4 text-start text-nowrap sub-color">{{ $t('Total Client Pay') }}</div>
                                                    <div class="col-7 text-end text-nowrap sub-color">{{dataPayments['totalRepayClient'] | numberFomartValue}}</div>
                                                    <div v-for="(val,index) in dataPayments['arr_received_datails']" :key="index" class="text-secondary text-end">
                                                        <div class="row" v-show="val.total_received>0">
                                                            <div class="col-6">
                                                                <strong>{{val.chart_code_name}}</strong>
                                                            </div>
                                                            <div class="col-6">
                                                                <strong>{{val.total_received | numberFomartValue}}</strong>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <!-- Daily Payment -->
                                    <tr>
                                        <td>
                                            <div class="d-flex justify-content-between">
                                                <div class="row w-100">
                                                    <div class="col-1"></div>
                                                    <div class="col-4 text-start text-nowrap main-color-purple">{{ $t('Daily Payment') }}</div>
                                                    <div class="col-7 text-end text-nowrap main-color-purple">{{dataPayments['totalDailyPayment'] | numberFomartValue}}</div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <!-- Paid Principal -->
                                    <tr>
                                        <td>
                                            <div class="d-flex justify-content-between">
                                                <div class="row w-100">
                                                    <div class="col-1"></div>
                                                    <div class="col-4 text-start text-nowrap main-color-purple">{{ $t('Total Principal') }}</div>
                                                    <div class="col-7 text-end text-nowrap main-color-purple">{{dataPayments['totalPrincipalToday'] | numberFomartValue}}</div>
                                                    <div v-for="(val,index) in dataPayments['arr_today']" :key="index" class="text-secondary text-end">
                                                        <div class="row" v-show="val.paid_principal>0">
                                                            <div class="col-6">
                                                                <strong>{{val.chart_code_name}}</strong>
                                                            </div>
                                                            <div class="col-6">
                                                                <strong>{{val.paid_principal | numberFomartValue}}</strong>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <!-- Paid Interest -->
                                    <tr>
                                        <td>
                                            <div class="d-flex justify-content-between">
                                                <div class="row w-100">
                                                    <div class="col-1"></div>
                                                    <div class="col-4 text-start text-nowrap main-color-purple">{{ $t('Total Interest') }}</div>
                                                    <div class="col-7 text-end text-nowrap main-color-purple">{{dataPayments['totalInterestToday'] | numberFomartValue}}</div>
                                                    <div v-for="(val,index) in dataPayments['arr_today']" :key="index" class="text-secondary text-end">
                                                        <div class="row" v-show="val.paid_interest>0">
                                                            <div class="col-6">
                                                                <strong>{{val.chart_code_name}}</strong>
                                                            </div>
                                                            <div class="col-6">
                                                                <strong>{{val.paid_interest | numberFomartValue}}</strong>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <!-- Operating Service -->
                                    <!-- <tr>
                                        <td>
                                            <div class="d-flex justify-content-between">
                                                <div class="row w-100">
                                                    <div class="col-1"></div>
                                                    <div class="col-4 text-start text-nowrap main-color-purple">{{ $t('Total Operating Services') }}</div>
                                                    <div class="col-7 text-end text-nowrap main-color-purple">{{dataPayments['totalOperatServiceToday'] | numberFomartValue}}</div>
                                                    <div v-for="(val,index) in dataPayments['arr_today']" :key="index" class="text-secondary text-end">
                                                        <div class="row" v-show="val.paid_operating_service>0">
                                                            <div class="col-6">
                                                                <strong>{{val.chart_code_name}}</strong>
                                                            </div>
                                                            <div class="col-6">
                                                                <strong>{{val.paid_operating_service | numberFomartValue}}</strong>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr> -->
                                    <!-- Paid Penalty -->
                                    <tr>
                                        <td>
                                            <div class="d-flex justify-content-between">
                                                <div class="row w-100">
                                                    <div class="col-1"></div>
                                                    <div class="col-4 text-start text-nowrap main-color-purple">{{ $t('Total Penalty') }}</div>
                                                    <div class="col-7 text-end text-nowrap main-color-purple">{{dataPayments['totalPenaltyToday'] | numberFomartValue}}</div>
                                                    <div v-for="(val,index) in dataPayments['arr_today']" :key="index" class="text-secondary text-end">
                                                        <div class="row" v-show="val.paid_penalty>0">
                                                            <div class="col-6">
                                                                <strong>{{val.chart_code_name}}</strong>
                                                            </div>
                                                            <div class="col-6">
                                                                <strong>{{val.paid_penalty | numberFomartValue}}</strong>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <!-- Total Prepaid -->
                                    <tr>
                                        <td>
                                            <div class="d-flex justify-content-between">
                                                <div class="row w-100">
                                                    <div class="col-1"></div>
                                                    <div class="col-4 text-start text-nowrap main-color-purple">{{ $t('Total Prepaid') }}</div>
                                                    <div class="col-7 text-end text-nowrap main-color-purple">{{dataPayments['total_prepaid'] | numberFomartValue}}</div>
                                                    <div v-for="(val,index) in dataPayments['arr_prepaid']" :key="index" class="text-secondary text-end">
                                                        <div class="row" v-show="val.total_prepaid>0">
                                                            <div class="col-6">
                                                                <strong>{{val.chart_code_name}}</strong>
                                                            </div>
                                                            <div class="col-6">
                                                                <strong>{{val.total_prepaid | numberFomartValue}}</strong>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <!-- Total Payoff -->
                                    <tr>
                                        <td>
                                            <div class="d-flex justify-content-between">
                                                <div class="row w-100">
                                                    <div class="col-1"></div>
                                                    <div class="col-4 text-start text-nowrap main-color-purple">{{ $t('Total Pay Off') }}</div>
                                                    <div class="col-7 text-end text-nowrap main-color-purple">{{dataPayments['totalPayOff'] | numberFomartValue}}</div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <!-- Total Write Off -->
                                    <tr>
                                        <td>
                                            <div class="d-flex justify-content-between">
                                                <div class="row w-100">
                                                    <div class="col-1"></div>
                                                    <div class="col-4 text-start text-nowrap main-color-purple">{{ $t('Total Write Off') }}</div>
                                                    <div class="col-7 text-end text-nowrap main-color-purple">{{dataPayments['totalReceiveWriteOff'] | numberFomartValue}}</div>
                                                    <div v-for="(val,index) in dataPayments['arr_write_off_data']" :key="index" class="text-secondary text-end">
                                                        <div class="row" v-show="val.total_received>0">
                                                            <div class="col-6">
                                                                <strong>{{val.chart_code_name}}</strong>
                                                            </div>
                                                            <div class="col-6">
                                                                <strong>{{val.total_received | numberFomartValue}}</strong>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <!-- ចុងគ្រា -->
                                    <tr v-if="params.co_id==null">
                                        <td>
                                            <div class="d-flex justify-content-between" >
                                                <div class="row w-100">
                                                    <div class="col-3 text-start text-nowrap submain-color">ចុងគ្រា</div>
                                                    <div class="col-9 text-end text-nowrap submain-color">{{ dataPayments['totalLastSumAmount'] | numberFomartValue }}</div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <!-- ចុងគ្រា -->
                                    <tr v-for="(obj_asset,index) in calTotal" :key="index"  v-if="params.co_id==null">
                                        <td>
                                            <div class="d-flex justify-content-between">
                                                <div class="row w-100">
                                                    <div class="col-1"></div>
                                                    <div class="col-4 text-start text-nowrap sub-color">{{obj_asset.chart_code_name}}</div>
                                                    <div class="col-7 text-end text-nowrap sub-color">{{(obj_asset.total) | numberFomartValue}}</div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>

                            <div class="footer" style="display: none;">
                                <p class="text-end mt-3 mb-3">
                                    <span v-if="params.today!=''">{{funCurrentDate(params.today)}}</span>
                                </p>
                                <div class="report-footer page-wrap">
                                    <div class="items">
                                        <p><strong>ហត្ថលេខាអ្នកប្រគល់ប្រាក់</strong></p>
                                        <br />
                                        <br />
                                        <br />
                                        <br />
                                    </div>
                                    <div class="items">
                                        <!-- <p><strong>ពិនិត្យដោយ</strong></p>
                                        <br>
                                        <br>
                                        <br>
                                        <br> -->
                                    </div>
                                    <div class="items">
                                        <p><strong>ហត្ថលេខាអ្នកទទួលប្រាក់</strong></p>
                                        <br />
                                        <br />
                                        <br />
                                        <br />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div slot="modal-custom">
                    <custom-date-filter @chooseDate="chooseDate"></custom-date-filter>
                </div>
            </theme-table>
        </div>
        <div class="col-xl-3 col-12">
            <div class="card border-0" style="overflow: auto; height: calc(100vh - 84px);">
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label">{{ $t('Co') }}</label>
                        <Multiselect v-model="params.co_id" trackBy="name" value="id" label="name" :searchable="true" :options="coes" />
                    </div>
                    <label class="form-label">{{ $t('Date') }}</label>
                    <div class="mb-3 d-flex">
                        <date-picker class="me-1" :range="true" :placeholder="$t('Date')" @input="funDate" v-model="params.date" valueType="format" format="YYYY-MM-DD"> </date-picker>
                        <button type="button" class="btn border btn-sm text-nowrap py-0" data-bs-toggle="modal" data-bs-target="#modalFilter"><i class="fas fa-sm fa-filter"></i> {{ $t('Filter') }}</button>
                    </div>
                    <div class="mb-3" v-show="user_branch != -1">
                        <label class="form-label">{{ $t('Closing Date') }}</label>
                        <date-picker
                            @input="funToday"
                            v-model="params.today"
                            valueType="format"
                            format="YYYY-MM-DD"
                            :placeholder="$t('Closing Date')">
                        </date-picker>
                    </div>
                    <!-- <div class="mb-3" v-show="user_branch != -1">
                        <label class="form-label">{{ $t('Closing Date') }}</label>
                        <date-picker @input="funToday" :placeholder="$t('Closing Date')" v-model="params.today" valueType="format" format="YYYY-MM-DD"> </date-picker>
                    </div> -->
                    <ul class="list-group list-group-flush mb-3">
                        <button @click="submitClosingReport" v-show="(dataPayments['LoanDisbursed'] + dataPayments['TotalReceived'])>0 && params.today!='' && params.pagin==true && user_branch != -1" type="button" class="btn btn-danger">
                            <i class="fa fa-do-not-enter"></i> {{ $t('Closing') }}
                        </button>
                    </ul>
                    <ul class="list-group list-group-flush mb-3">
                        <button type="button" class="btn btn-success" @click="funSearchData"><i class="fa fa-search"></i> {{ $t('Search') }}</button>
                    </ul>
                    <ul class="list-group list-group-flush">
                        <button type="button" @click="printP" class="btn btn-primary"><i class="fa fa-print"></i> {{ $t('Print') }}</button>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import CustomDateFilter from "../../components/report/CustomDateFilter.vue";
    import CumstomPagination from "../../components/CustomPagination.vue";
    import HeaderReport from "../../components/report/header.vue";
    import ThemeTable from "../../components/ThemeTable.vue";
    import moment from "moment";
    export default {
        props: ["isEdit"],
        components: {
            CumstomPagination,
            CustomDateFilter,
            HeaderReport,
            ThemeTable,
        },
        data() {
            return {
                moment: moment,
                format: "YYYY-MM-DD",
                dataPayments: { data: [] },
                coes: [],
                assets: [],
                user_branch  : '',
                form: new Form({}),
                params: {
                    page: 1,
                    per_page: 25,
                    search_text: "",

                    co_id: null,
                    date: [],
                    now: moment().format("YYYY-MM-DD"),
                    today: "",
                    isEdit: "",
                    pagin: false,
                },
                 user_branch: 1
            };
        },
        created() {
            // this.funGetData();
            this.getCO();
            this.funComUserBranch();
            this.params.today = moment().format("YYYY-MM-DD");
        },
        methods: {
            getCO() {
                axios
                    .get("admin-api/com-co")
                    .then((res) => {
                        this.coes = res.data;
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            },
            chooseDate(value) {
                this.params.date  = value.data;
                this.params.today = "";
                this.params.pagin = false;
                this.funGetData();
            },
            funGetData() {
                axios.get("admin-api/closing", {
                    params: this.params,
                }).then((res) => {
                    this.dataPayments = res.data;
                }).catch((error) => {
                    console.log(error);
                });
            },
            funSearchData() {
                this.params.pagin = true;
                this.funGetData();
            },
            submitClosingReport() {
                this.$confirm({
                    message: "Are you sure?",
                    button: {
                        no: "No",
                        yes: "Yes",
                    },
                    callback: (confirm) => {
                        if (confirm) {
                            axios.post("admin-api/closing", {
                                params: this.params,
                                dataPayments: this.dataPayments,
                            }).then((res) => {
                                if (res.data.status == 1) {
                                    this.$toast.success(res.data.message);
                                    this.funGetData();

                                } else {
                                    this.$toast.warning(res.data.message);
                                }
                            });
                        }
                    },
                });
            },
            printP() {
                this.$htmlToPaper("show-print");
            },
            funDate() {
                this.params.today = "";
                this.params.pagin = false;
            },
            funToday() {
                this.params.date = [];
                this.params.pagin = false;

            },
            funDay(day) {
                if (day == "Mo") {
                    return "ចន្ទ";
                } else if (day == "Tu") {
                    return "អង្គារ";
                } else if (day == "We") {
                    return "ពុធ";
                } else if (day == "Th") {
                    return "ព្រហស្បតិ៍";
                } else if (day == "Fr") {
                    return "សុក្រ";
                } else if (day == "Sa") {
                    return "សៅរ៍";
                } else {
                    return "អាទិត្យ";
                }
            },
            funCurrentDate(date) {
                if (date) {
                    return "ថ្ងៃ" + this.funDay(moment(date).format("dd")) + " ទី" + moment(date).format("DD") + " ខែ" + this.funMonth(moment(date).format("MMM")) + " ឆ្នាំ" + moment(date).format("YYYY");
                } else {
                    return "ថ្ងៃ...................ទី................... ខែ................... ឆ្នាំ...................";
                }
            },
            funMonth(mon) {
                if (mon == "Jan") {
                    return "មករា";
                } else if (mon == "Feb") {
                    return "កុម្ភៈ";
                } else if (mon == "Mar") {
                    return "មីនា";
                } else if (mon == "Apr") {
                    return "មេសា";
                } else if (mon == "May") {
                    return "ឧសភា";
                } else if (mon == "Jun") {
                    return "មិថុនា";
                } else if (mon == "Jul") {
                    return "កក្កដា";
                } else if (mon == "Aug") {
                    return "សីហា";
                } else if (mon == "Sep") {
                    return "កញ្ញា";
                } else if (mon == "Oct") {
                    return "តុលា";
                } else if (mon == "Nov") {
                    return "វិច្ឆិកា";
                } else if (mon == "Dec") {
                    return "ធ្នូ";
                }
            },
        },
        computed: {
            calTotal() {
                var arr = [];
                var totalsMap = {};
                if (this.dataPayments["assets"] && this.dataPayments["arr_loan_disburst"] && this.dataPayments["arr_received_datails"] && this.dataPayments["arr_write_off_data"]) {
                    this.dataPayments["assets"].forEach((asset) => {
                        let id = asset.chart_of_acc_id;
                        if (!totalsMap[id]) {
                            totalsMap[id] = {
                                chart_code_name: asset.chart_code_name,
                                total: 0,
                            };
                        }
                        totalsMap[id].total += asset.total;
                    });
                    // // Total loan_out
                    this.dataPayments["arr_loan_disburst"].forEach((loan) => {
                        let id = loan.chart_of_acc_id;
                        if (!totalsMap[id]) {
                            totalsMap[id] = {
                                chart_code_name: loan.chart_code_name,
                                total: 0,
                            };
                        }
                        totalsMap[id].total -= loan.loan_out;
                    });
                    // Total service
                    this.dataPayments["arr_loan_disburst"].forEach((loan) => {
                        let id = loan.chart_of_acc_id;
                        if (!totalsMap[id]) {
                            totalsMap[id] = {
                                chart_code_name: loan.chart_code_name,
                                total: 0,
                            };
                        }
                        totalsMap[id].total += loan.total_service;
                    });
                    // Total insurance
                    this.dataPayments["arr_loan_disburst"].forEach((loan) => {
                        let id = loan.chart_of_acc_id;
                        if (!totalsMap[id]) {
                            totalsMap[id] = {
                                chart_code_name: loan.chart_code_name,
                                total: 0,
                            };
                        }
                        totalsMap[id].total += loan.total_insurance;
                    });
                    // Total Collection
                    this.dataPayments["arr_loan_disburst"].forEach((loan) => {
                        let id = loan.chart_of_acc_id;
                        if (!totalsMap[id]) {
                            totalsMap[id] = {
                                chart_code_name: loan.chart_code_name,
                                total: 0,
                            };
                        }
                        totalsMap[id].total += loan.total_collection;
                    });
                    // Total received
                    this.dataPayments["arr_received_datails"].forEach((received) => {
                        let id = received.chart_of_acc_id;
                        if (!totalsMap[id]) {
                            totalsMap[id] = {
                                chart_code_name: received.chart_code_name,
                                total: 0,
                            };
                        }
                        totalsMap[id].total += received.total_received;
                    });
                    // Total received
                    this.dataPayments["arr_write_off_data"].forEach((received) => {
                        let id = received.chart_of_acc_id;
                        if (!totalsMap[id]) {
                            totalsMap[id] = {
                                chart_code_name: received.chart_code_name,
                                total: 0,
                            };
                        }
                        totalsMap[id].total += received.total_received;
                    });
                }
                // Convert totalsMap to an array
                for (let key in totalsMap) {
                    if (totalsMap.hasOwnProperty(key)) {
                        arr.push(totalsMap[key]);
                    }
                }
                return arr;
            },
        },
    };
</script>
