<template>
    <theme-table :noneActions="true">
        <span slot="main-title">
            {{ $t('Collateral') }}
        </span>
        <template slot="more-button">
            <div class="me-3">
            <router-link v-if="$can('Loan Collateral Create')" :to="{ name: 'CollateralDetailCreate', }" v-show="user_branch != -1">
                <button class="btn btn-success text-light">
                    <i class="fa-solid fa-plus fa-sm me-1"></i>{{ $t('Add New') }}
                </button>
            </router-link>
            </div>
            <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">
                    <div class="mb-3">
                        <label class="form-label">{{ $t('Client') }}</label>
                        <Multiselect mode="tags" :close-on-select="false" v-model="params.client_id" trackBy="name" value="id" label="name" :searchable="true" :options="clients" />
                    </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> 
            </div>
        </template>
        <div slot="body"> 
            <div id="show-print">
                <div class="table-responsive table_scroll report_print">
                    <header-report :title="$t('Collaterals')" style="display: none;"></header-report>
                    <table class="table table-bordered">
                        <thead class="text-nowrap fixed_table">
                            <tr>
                                <th>{{ $t("#") }}</th>
                                <th>{{ $t("Client Code") }}</th>
                                <th>{{ $t("Client Name") }}</th>
                                <th>{{ $t("Title") }}</th>
                                <th class="d-print-none" v-show="user_branch != -1">{{ $t("Action") }}</th>
                            </tr>
                        </thead>


                        <tbody class="text-nowrap">
                            <tr v-for="(value, index) in getCollaterals.data" :key="index">
                                <td>{{index + 1}}</td>
                                <td>{{value.client_code}}</td>
                                <td>{{value.client_name}}</td>
                                <td>{{value.title}}</td>
                                <td class="d-print-none" v-show="user_branch != -1">
                                    <router-link  v-if="$can('Loan Collateral Create')" :to="{ name: 'CollateralDetailCreate',params:{id:value.id} }" :title="$t('Edit')" 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(value.id)"
                                        class="btn btn-danger  s-btn-xs">
                                        <i class="fa-solid fa-trash-can fa-sm"></i>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <footer-report style="display: none;"></footer-report>
                </div>
            </div>
            <cumstom-pagination :pageShow="true" @PageChange="PageChange($event)" :data="getCollaterals" @onChangePage="funGetData($event)"></cumstom-pagination>
        </div>
    </theme-table>
</template>

<script>
    import CumstomPagination from "../../components/CustomPagination.vue";
    import HeaderReport from "../../components/report/header.vue";
    import FooterReport from "../../components/report/footer.vue";
    import ThemeTable from '../../components/ThemeTable.vue'
    export default {
        components: {
            CumstomPagination,
            HeaderReport,
            FooterReport,
            ThemeTable
        },
        data() {
            return {
                getCollaterals: { data: [] },
                // getCollaterals: [],
                // Collaterals: [],
                clients: [],
                user_branch : '',
                form: new Form({

                }),
                params: {
                    id : "",
                    search_text: "",
                    page: 1,
                    per_page: 25,
                    check: "",
                    collateral_id: [],
                    client_id: [],
                },
            };
        },
        created() {
            this.funGetData();
            this.getClient();
            this.funComUserBranch();
            // this.funGetCollateral();
        },

        methods: {
            // funGetCollateral() {
            //     axios
            //         .get("/admin-api/com-collaterals")
            //         .then((res) => {
            //             this.Collaterals = res.data;
            //         })
            //         .catch((err) => console.log(err));
            // },
            getClient() {
                axios
                    .get("admin-api/com-client")
                    .then((res) => {
                        this.clients = res.data;
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            },
            funGetData(page = 1) {
                this.params.page = page;
                axios.get("admin-api/collateral-list", {
                        params: this.params,
                    }).then((res) => {
                        this.getCollaterals = res.data;

                })
                .catch((error) => {
                    if (error.message == "Request failed with status code 403") {
                        this.$router.push({ name: "permissionTest" });
                    } else {
                        console.log(error.message);
                    }
                });
            },
            funDelete(id) {
                this.$confirm({
                    message: 'Are you sure?',
                    button: {
                        no: 'No',
                        yes: 'Yes'
                    },
                    callback: confirm => {
                        if (confirm) {
                            this.form.delete("admin-api/collaterals/" + id).then((res) => {
                                if (res.data.status == 1) {
                                    this.$toast.success(res.data.message);
                                    this.funGetData();
                                } else {
                                    this.$toast.warning(res.data.message);
                                }
                            })
                        }
                    }
                });
            },
            PageChange: function (e) {
                this.params.per_page = e.target.value;
                this.funGetData();
            },
            funSub(id) {
                this.$confirm({
                    message: "Are you sure?",
                    button: {
                        no: "No",
                        yes: "Yes",
                    },
                    callback: (confirm) => {
                        if (confirm) {
                            this.params.check = 2;
                            this.form
                            .put("admin-api/collaterals/" + id, {
                                params: this.params,
                            })
                            .then((res) => {
                                if (res.data.status == 1) {
                                    this.$toast.success(res.data.message);
                                    this.funGetData();
                                } else {
                                    this.$toast.warning(res.data.message);
                                }
                            });
                        }
                    },
                });
            },
            funSup(id) {
                this.$confirm({
                    message: "Are you sure?",
                    button: {
                        no: "No",
                        yes: "Yes",
                    },
                    callback: (confirm) => {
                        if (confirm) {
                            this.params.check = 1;
                            this.form
                                .put("admin-api/collaterals/" + id, {
                                    params: this.params,
                                })
                                .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');
            },
        },
    };
</script>
