<template>
    <theme-table :newButton="true" :permisName="'Banknote Management Create'" @click="funAddNew">
        <span slot="main-title">
            {{ $t('Banknote Management List') }}
        </span>
        <div slot="body">
            <div class="table-responsive table_scroll">
                <table class="table table-bordered">
                    <thead class="text-nowrap fixed_table">
                        <tr>
                            <th>{{ $t("#") }}</th>
                            <th>{{ $t("Date Bank Note") }}</th>
                            <th>{{ $t("Created By") }}</th>
                            <th>{{ $t("Total Banknote Add") }}</th>
                            <th>{{ $t("Total Banknote Withdrawal") }}</th>
                            <th>{{ $t("Action") }}</th>
                        </tr>
                    </thead>
                    <tbody class="text-nowrap">
                        <tr v-for="(value, index) in dataBankNote.data" :key="index">
                            <td>{{ index + 1 }}</td>
                            <td>{{value.date_banknote | onlyDate}}</td>
                            <td>{{value.created_by}}</td>
                            <td>
                                <span v-if="value.currency_id==1">{{value.total_add_kh | numberFomartValue}}</span>
                                <span v-else>{{value.total_add_dolla | numberFomartValue}}</span>
                            </td>
                            <td>
                                <span v-if="value.currency_id==1">{{value.total_sub_kh | numberFomartValue}}</span>
                                <span v-else>{{value.total_sub_dolla | numberFomartValue}}</span>
                            </td>
                            <td>
                                <!-- <button v-if="$can('Banknote Management Print')" type="button" :title="'ព្រីន'" @click="funPrint(value.id)" class="btn btn-success s-btn-xs">
                                    <i class="fa-solid fa-print fa-sm"></i>
                                </button> -->
                                <button v-if="$can('Banknote Management Edit')" v-show="index==0" type="button" @click="funAddNew(value.id)" :title="$t('Edit')" class="btn btn-dark s-btn-xs">
                                    <i class="fa-solid fa-pen-to-square fa-sm"></i>
                                </button>
                                <button v-if="$can('Banknote Management Delete')" v-show="index==0" type="button" :title="$t('Delete')" @click="funDelete(value.id)" class="btn btn-danger  s-btn-xs">
                                    <i class="fa-solid fa-trash-can fa-sm"></i>
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="modal fade" id="modalPrintReciept" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-xl modal-dialog-scrollable">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">ការគ្រប់គ្រងក្រដាសប្រាក់ប្រចាំថ្ងៃ</h4>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div id="show-print">
                                <div class="custom-reciept-top">
                                    <PrintDailyBankNote :data="dataDetail"/>
                                </div>
                                <!-- <div class="custom-reciept-bottom d-none">
                                    <PrintDailyBankNote :data="dataDetail"/>
                                </div> -->
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ $t("Close") }}</button>
                            <button type="button" class="btn btn-primary" @click="printP">{{$t('Print')}}</button>
                        </div>
                    </div>
                </div>
            </div>
            <cumstom-pagination :pageShow="true" @PageChange="PageChange($event)" :data="dataBankNote" @onChangePage="funGetData($event)"></cumstom-pagination>

            <div slot="modal-custom">
                <create-daily-bank-note :form="form" @submitData="submitData"></create-daily-bank-note>
            </div>
        </div>
    </theme-table>
</template>

<script>
    import CumstomPagination from '../../../components/CustomPagination.vue';
    import ThemeTable from '../../../components/ThemeTable.vue';
    import CreateDailyBankNote from "./CreateDailyBankNote.vue";
    import PrintDailyBankNote from "./PrintDailyBankNote.vue";
    export default {
        components: {
            CumstomPagination,
            ThemeTable,
            CreateDailyBankNote,
            PrintDailyBankNote,
        },
        data() {
            return {
                dataBankNote: {},
                dataDetail : '',
                form: new Form({
                    id: '',
                    date_banknote:new Date().toISOString(),
                    currency_id : '',
                    qty_100000_add:0,
                    qty_50000_add: 0,
                    qty_30000_add: 0,
                    qty_20000_add: 0,
                    qty_15000_add: 0,
                    qty_10000_add: 0,
                    qty_5000_add: 0,
                    qty_2000_add: 0,
                    qty_1000_add: 0,
                    qty_500_add: 0,
                    qty_200_add: 0,
                    qty_100_add: 0,
                    qty_100_dollar_add: 0,
                    qty_50_dollar_add: 0,
                    qty_20_dollar_add: 0,
                    qty_10_dollar_add: 0,
                    qty_5_dollar_add: 0,
                    qty_1_dollar_add: 0,
                    qty_100000_sub: 0,
                    qty_50000_sub: 0,
                    qty_30000_sub: 0,
                    qty_20000_sub: 0,
                    qty_15000_sub: 0,
                    qty_10000_sub: 0,
                    qty_5000_sub: 0,
                    qty_2000_sub: 0,
                    qty_1000_sub: 0,
                    qty_500_sub: 0,
                    qty_200_sub: 0,
                    qty_100_sub: 0,
                    qty_100_dollar_sub: 0,
                    qty_50_dollar_sub: 0,
                    qty_20_dollar_sub: 0,
                    qty_10_dollar_sub: 0,
                    qty_5_dollar_sub: 0,
                    qty_1_dollar_sub: 0,
                }),
                params: {
                    page: 1,
                    per_page: 25,
                }
            }
        },
        created() {
            this.funGetData();
        },
        methods: {
            funGetData(page = 1) {
                this.params.page = page;
                axios.get('admin-api/get-daily-banknote', {
                    params: this.params
                }).then((res) => {
                    this.dataBankNote = 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();
            },
            funAddNew(id) {
                axios.get("admin-api/bank-notes/create", {
                    params: { 'id': id }
                }).then((res) => {
                    if (res.data.status == 1) {
                        this.form.fill(res.data.data);
                    } else {
                        this.form.reset();
                        this.form.currency_id = res.data.currency_id;
                    }
                    $("#modalAddNew").modal("show");
                });
            },
            submitData() {
                this.form.post("admin-api/bank-notes").then((res) => {
                    if (res.data.status == 1) {
                        this.form.reset();
                        this.$toast.success(res.data.message);
                        $('#modalAddNew').modal('hide');
                    } else {
                        this.$toast.warning(res.data.message);
                    }
                    this.funGetData();
                }).catch((error) => {
                    console.log(error);
                    this.$toast.warning(res.data.message);
                });
            },
            funPrint(id){
                axios.get('admin-api/show-detail-bank-note/'+id).then((res) => {
                    this.dataDetail = res.data;
                    this.loading = false;
                }).catch((err) => console.log(err));
                $("#modalPrintReciept").modal("show");
            },
            printP() {
                this.$htmlToPaper("show-print", {
                    styles: ["/css/app.css", "/css/print/print-reciept.css"],
                });
            },
            funDelete(id) {
                this.$confirm({
                    message: 'Are you sure?',
                    button: {
                        no: 'No',
                        yes: 'Yes'
                    },
                    callback: confirm => {
                        if (confirm) {
                            this.form.delete("admin-api/bank-notes/" + id).then((res) => {
                                if (res.data.status == 1) {
                                    this.$toast.success(res.data.message);
                                    this.funGetData();
                                } else {
                                    this.$toast.warning(res.data.message);
                                }
                            })
                        }
                    }
                });
            },
        }
    }
</script>