<template>

    <theme-table :noneActions="true">
        <span slot="main-title">
            {{ $t('Balance Sheet') }}
        </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">
                    <label class="form-label">{{ $t('Journal Date') }}</label>
                    <div class="mb-3 d-flex">
                        <date-picker class="me-1" :range="true" :placeholder="$t('Journal Date')" v-model="params.journal_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="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 tbscroll_nopaginat custom_report">
                    <header-report :title="$t('Balance Sheet')" style="display:none"></header-report>
                    <table class="table tb-journal table-borderless mb-0">
                        <tr>
                            <td class="w-50 align-top border-0">
                                <table class="tb-journal w-100">
                                    <tr>
                                        <th style="border-bottom:2px solid #2076ba;">
                                            <h5><strong>{{$t('ASSETS')}}</strong></h5>
                                        </th>
                                    </tr>
                                    <tr v-for="(obj_asset,index) in assets" :key="index">
                                        <td>
                                            <div class="d-flex justify-content-between ps-3">
                                                <label>({{obj_asset.chart_code}}) {{obj_asset.chart_name}}  </label>
                                                <label>{{(obj_asset.total) | numberFomartValue}}</label>
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td class="px-3 border-0"></td>
                            <td class="w-50 border-0">
                                <table class="tb-journal w-100">
                                    <tr>
                                        <th style="border-bottom:2px solid #2076ba;">
                                            <h5><strong>{{$t('LIABILITIES')}}</strong></h5>
                                        </th>
                                    </tr>
                                    <tr v-for="(obj_liability,index) in liabilities" :key="index">
                                        <td>
                                            <div class="d-flex justify-content-between ps-3">
                                                <label>({{obj_liability.chart_code}}) {{obj_liability.chart_name}}</label>
                                                <label>{{(obj_liability.total)  | numberFomartValue}}</label>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="pt-2">
                                            <strong class="d-flex justify-content-between" style="width: calc(100%); " >
                                                <label><i>{{$t('Total LIABILITIES')}}</i></label>
                                                <label class="text-success">{{(allData.total_liabilities) | numberFomartValue}}</label>
                                            </strong>
                                        </td>
                                    </tr>
                                </table>
                                <table class="tb-journal" style="width: calc( 100%)" >
                                    <tr>
                                        <th class="pt-3" style="border-bottom:2px solid #2076ba;">
                                            <h5><strong>{{$t('EQUITY')}}</strong></h5>
                                        </th>
                                    </tr>
                                    <tr v-for="(obj_equity,index) in  equities" :key="index">
                                        <td>
                                            <div class="d-flex justify-content-between ps-3">
                                                <p>({{obj_equity.chart_code}}) {{obj_equity.chart_name}}</p>
                                                <p>{{(obj_equity.total)  | numberFomartValue}}</p>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="pt-2">
                                            <div class="d-flex justify-content-between ps-3" style="width: calc(100%);" >
                                                <p>{{$t('Return Earning')}}</p>
                                                <p>{{(allData.return_earning) | numberFomartValue}}</p>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="pt-2">
                                            <strong class="d-flex justify-content-between" style="width: calc(100%);" >
                                                <p><i>{{$t('Total Equity')}}</i></p>
                                                <p class="text-success">{{(allData.total_equity) | numberFomartValue}}</p>
                                            </strong>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td class="pt-2 border-0">
                                <strong class="d-flex justify-content-between" style="width: calc(100%);border-bottom:2px solid #2076ba;" >
                                    <p><i>{{$t('Total Assets')}}</i></p>
                                    <p class="text-danger">{{ (allData.total_asset) | numberFomartValue}}</p>
                                </strong>
                            </td>
                            <td class="px-3 border-0"></td>
                            <td class="pt-2 border-0">
                                <strong class="d-flex justify-content-between" style="width: calc(100%);border-bottom:2px solid #2076ba;" >
                                    <i><p>{{$t("Total Liabilities and Owner's Equity")}}</p></i>
                                    <p class="text-danger">{{ (allData.total_liabilities + allData.total_equity) | numberFomartValue}}</p>
                                </strong>
                            </td>
                        </tr>
                    </table>
                    <div class="footer mt-3" style="display:none">
                        <div class="report-footer page-wrap">
                            <div class="items">
                                <p> {{funToday(today)}}</p>
                                <p><strong>ពិនិត្យ និងឯកភាពដោយ</strong></p>
                            </div>
                            <div class="items">
                                
                            </div>
                            <div class="items">
                                <p> {{funToday(today)}}</p>
                                <p><strong>រៀបចំដោយ</strong></p>
                            </div>
                        </div>
                    </div>


                    <!-- epxport excel -->

                    <table class="table table-bordered text-nowrap d-none" id="excel-table">
                        <thead>
                            <tr>
                                <th class="text-red" style="width: 30%;">{{ $t('Category') }}</th>
                                <th class="text-red" style="width: 50%;">{{ $t('Chart Name') }}</th>
                                <th class="text-red text-end" style="width: 20%;">{{ $t('Amount') }}</th>
                            </tr>
                        </thead>
                       
                        <tbody>
                            <!-- Assets -->
                            <tr>
                                <th class="text-start" colspan="3">{{ $t('ASSETS') }}</th>
                            </tr>

                            <tr v-for="(obj_asset, index) in assets" :key="'asset-'+index">
                                <td></td>
                                <td>({{ obj_asset.chart_code }}) {{ obj_asset.chart_name }}</td>
                                <td class="text-end">{{ obj_asset.total | numberFomartValue }}</td>
                            </tr>
                            <tr>
                                <td><i>{{ $t('Total Assets') }}</i></td>
                                <td></td>
                                <td class="text-end">{{ allData.total_asset | numberFomartValue }}</td>
                            </tr>

                            <!-- Liabilities Header -->
                            <tr>
                                <th class="text-start" colspan="3">{{ $t('LIABILITIES') }}</th>
                               
                            </tr>
                            <tr v-for="(obj_liability, index) in liabilities" :key="'liab-'+index">
                                <td></td>
                                <td>({{ obj_liability.chart_code }}) {{ obj_liability.chart_name }}</td>
                                <td class="text-end">{{ obj_liability.total | numberFomartValue }}</td>
                            </tr>
                            <tr>
                                <td><i>{{ $t('Total LIABILITIES') }}</i></td>
                                <td></td>
                                <td class="text-end">{{ allData.total_liabilities | numberFomartValue }}</td>
                            </tr>

                            <!-- Equity Header -->
                            <tr>
                                <th class="text-start" colspan="3">{{ $t('EQUITY') }}</th>
                            </tr>
                            <tr v-for="(obj_equity, index) in equities" :key="'eq-'+index">
                                <td></td>
                                <td>({{ obj_equity.chart_code }}) {{ obj_equity.chart_name }}</td>
                                <td class="text-end">{{ obj_equity.total | numberFomartValue }}</td>
                            </tr>
                            <tr>
                                <td>{{ $t('Return Earning') }}</td>
                                <td></td>
                                <td class="text-end">{{ allData.return_earning | numberFomartValue }}</td>
                            </tr>
                            <tr>
                                <td>{{ $t('Total Equity') }}</td>
                                <td></td>
                                <td class="text-end">{{ allData.total_equity | numberFomartValue }}</td>
                            </tr>

                            <tr>
                                <td><i>{{ $t("Total Liabilities and Owner's Equity") }}</i></td>
                                <td></td>
                                <td class="text-end">{{ (allData.total_liabilities + allData.total_equity) | numberFomartValue }}</td>
                            </tr>
                        </tbody>


                    </table>

                </div>
            </div>
        </div>
        <div slot="modal-custom">
            <custom-date-filter @chooseDate="chooseDate"></custom-date-filter>
        </div>
    </theme-table>
</template>

<script>
    import CustomDateFilter from '../../../components/report/CustomDateFilter.vue'
    import HeaderReport from '../../../components/report/header.vue'
    import ThemeTable from "../../../components/ThemeTable.vue"
    import { exportTableToExcel } from "../../../exportExcel.js"
    import moment from "moment";

    export default {
        components:{
            HeaderReport,
            CustomDateFilter,
            ThemeTable
        },
        data() {
            return {
                moment : moment,
                today  : new Date().toISOString(),
                format : 'YYYY-MM-DD',
                    allData    : '',
                    assets     : [],
                    liabilities: [],
                    equities   : [],
                form: new Form({
                }),
                params: {
                    journal_date:[],
                },
            }
        },
        created() {
            this.funGetData();
        },
        methods: {
            async exportExcell() {
                this.$isLoading(true)
                try {
                    await exportTableToExcel({
                        tableId: "excel-table",
                        filename: "ExportCashFlow",
                        reportTitle: "តារាងតុល្យភាព",
                        subDate:this.params.date,
                    })
                } catch (e) {
                    this.$toast.warning(e.message);
                } finally {
                    this.$isLoading(false)
                }
            },
            funGetData() {
                axios.get("accounting/balance-sheet", {
                    params: this.params,
                }).then((res) => {
                    this.allData     = res.data.all;
                    this.assets      = res.data.assets;
                    this.liabilities = res.data.liabilities;
                    this.equities    = res.data.equities;
                });
            },
            chooseDate(value){
                this.params.journal_date = value.data;
                this.funGetData();
            },
            printP() {
                this.$htmlToPaper('show-print');
            },
            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 "អាទិត្យ";
                }
            },
            funToday(date) {
                if (date) {
                    return "ថ្ងៃ" + this.funDay(moment(date).format("dd")) + " ទី" + moment(date).format("DD") + " ខែ" + this.funMonth(moment(date).format("MMM")) + " ឆ្នាំ" + moment(date).format("YYYY");
                }
            },
            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 "ធ្នូ";
                }
            },
           
        }
    }
</script>
