<template>
    <theme-table :route="'CollateralDetailCreate'" :permisName="'Collateral Create'" @input="Searching">
        <span slot="main-title">
            {{ $t('Collaterals') }}
        </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("Client") }}</th>
                            <th>{{ $t("Collaterals") }}</th>
                            <th>{{ $t("Action") }}</th>
                        </tr>
                    </thead>
                    <tbody class="text-nowrap">
                        <tr v-for="(cat, index) in collaterals.data" :key="index">
                            <td> {{ index + 1 }} </td>
                            <td>{{ cat.client_name }}</td>
                            <td>{{ cat.names }}</td>
                            <td>
                                <router-link v-if="$can('Collateral Edit')" :title="$t('Edit')" :to="{ name: 'CollateralDetailCreate',params:{id:cat.client_id , num:cat.num} }" class="btn btn-dark  s-btn-xs"><i class="fa-solid fa-pen-to-square fa-sm"></i></router-link>
                                <button v-if="$can('Collateral Delete')" type="button" :title="$t('Delete')" @click="funDelete(cat.client_id,cat.num)"
                                    class="btn btn-danger  s-btn-xs">
                                    <i class="fa-solid fa-trash-can fa-sm"></i>
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <cumstom-pagination :pageShow="true" @PageChange="PageChange($event)" :data="collaterals" @onChangePage="funGetData($event)"></cumstom-pagination>
        </div>
    </theme-table>

</template>
<script>
    import ThemeTable from '../../components/ThemeTable.vue'
    import CumstomPagination from '../../components/CustomPagination.vue'
    export default {
        components: {
            ThemeTable,
            CumstomPagination,
        },
        data() {
            return {
                collaterals: {},
                form: new Form({

                }),
                params: {
                    search_text:'',
                    page: 1,
                    per_page: 25,
                }
            }
        },
        created() {
            this.funGetData();
        },
        methods: {
            funGetData(page = 1) {
                this.params.page = page;
                axios.get('admin-api/client-has-collateral', {
                    params: this.params
                }).then((res) => {
                    this.collaterals = 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();
            },
            funDelete(id,num) {
                this.$confirm({
                    message: 'Are you sure?',
                    button: {
                        no: 'No',
                        yes: 'Yes'
                    },
                    callback: confirm => {
                        if (confirm) {
                           this.form.delete(`admin-api/delete-collateral/${id}/${num}`).then((res) => {
                                if (res.data.status == 1) {
                                    this.$toast.success(res.data.message);
                                    this.funGetData();
                                } else {
                                    this.$toast.warning(res.data.message);
                                }
                            })
                        }
                    }
                });
            },
        }
    }
</script>
