<template>
    <theme-table :newButton="true" :permisName="'Type Account Create'" @click="funshowForm" @input="Searching">
        <span slot="main-title">
            {{ $t('Type Of Account') }}
        </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 class="text-nowrap">{{ $t("Category") }}</th>
                            <th >{{ $t("Description") }}</th>
                            <th >{{ $t("Create Date") }}</th>
                            <th >{{ $t("Action") }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <template v-for="(value) in datas.data">
                            
                            <tr >
                                <td>{{value.id}}</td>
                                <td  style="min-width: 120px">{{value.type_name}}</td>
                                <td>
                                    <div style="min-width: 200px">
                                        {{value.desc}}
                                    </div>
                                </td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr v-for="(sub_value,sub_index) in value.type_of_acc_details" :key="value.id+'-'+sub_value.id">
                                <td class="py-1"></td>
                                <td class="py-1">{{ sub_index+1 }}. {{ sub_value.name }}</td>
                                <td class="py-1">{{ sub_value.remark }}</td>
                                <td class="py-1">{{ sub_value.created_at | onlyDate }}</td>
                                <td class="py-1 d-flex" v-if="![1,2,3,4,5,6,7,8,9].includes(sub_value.id)">
                                    <button v-if="$can('Type Account Edit')" type="button" :title="$t('Edit')" @click="funshowForm(sub_value.id)"
                                        class="btn btn-dark s-btn-xs me-1">
                                        <i class="fa-solid fa-pen-to-square fa-sm"></i>
                                    </button>
                                    <button v-if="$can('Type Account Delete')" type="button" :title="$t('Delete')" @click="funDelete(sub_value.id)"
                                        class="btn btn-danger s-btn-xs">
                                        <i class="fa-solid fa-trash-can fa-sm"></i>
                                    </button>
                                </td>
                                <td v-else></td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>
            <cumstom-pagination :pageShow="true" @PageChange="PageChange($event)" :data="datas" @onChangePage="funGetData($event)"></cumstom-pagination>
        </div>
        <div slot="modal-custom">
            <TypeOfAccountForm :form="form" @submitData="submitData"></TypeOfAccountForm>
        </div>
    </theme-table>
</template>

<script>
    import CumstomPagination from '../../../components/CustomPagination.vue'
    import TypeOfAccountForm from './TypeOfAccountForm.vue'
    import ThemeTable from "../../../components/ThemeTable.vue"
    export default {
        components: {
            CumstomPagination,
            TypeOfAccountForm,
            ThemeTable
        },
        data() {
            return {
                datas: {},
                form: new Form({
                    'id': '',
                    'name': '',
                    'remark':'',
                    'type_of_acc_id':'', 
                }),
                params: {
                    page: 1,
                    per_page: 25,
                    search_text: ''
                }
            }
        },
        created() {
            this.funGetData();
        },
        methods: {
            funGetData(page = 1) {
                this.params.page = page;
                axios.get('accounting/type-of-account', {
                    params: this.params
                }).then((res) => {
                    this.datas = 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();
            },
            Searching(e) {
                this.params.search_text = e.target.value;
                this.funGetData();
            },
            funshowForm(id) {
                axios.get('accounting/type-of-account/create', {
                    params: { 'id': id }
                }).then((res) => {
                    if (res.data.status == 1) {
                        this.form.fill(res.data.data);
                    } else {
                        this.form.reset();
                    }
                    $("#modalForm").modal("show");
                });
            },
            submitData() {
                this.form.post("accounting/type-of-account").then((res) => {
                    if (res.data.status == 1) {
                        this.form.reset();
                        this.$toast.success(res.data.message);
                        $("#modalForm").modal("hide");
                        this.funGetData();
                    } else {
                        this.$toast.warning(res.data.message);
                    }
                }).catch((error) => {
                    console.log(error);
                })
            },
            funDelete(id) {
                this.$confirm({
                    message: 'Are you sure?',
                    button: {
                        no: 'No',
                        yes: 'Yes'
                    },
                    callback: confirm => {
                        if (confirm) {
                            this.form.delete("accounting/type-of-account/" + id).then((res) => {
                                if (res.data.status == 1) {
                                    this.$toast.success(res.data.message);
                                    this.funGetData();
                                } else {
                                    this.$toast.warning(res.data.message);
                                }
                            })
                        }
                    }
                });
            },
        }
    }
</script>