<template>
    <theme-table :noneActions="true">
        <span slot="main-title">
            {{$t("Collateral Report")}}
        </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">
                    <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="mb-3">
                        <label class="form-label">{{ $t('Collateral') }}</label>
                        <Multiselect mode="tags" :close-on-select="false" v-model="params.collateral_detail_id" :placeholder="$t('Collateral')" label="title" :searchable="true" :options="collateralDetail" />
                    </div>
                     <div class="mb-3">
                        <label class="form-label">{{ $t('Co') }}</label>
                        <Multiselect mode="tags" :close-on-select="false" v-model="params.co_id" trackBy="name" value="id" label="name" :searchable="true" :options="coes" />
                    </div>
                    <div class="mb-3">
                        <label class="form-label">{{ $t('Loan Code') }}</label>
                        <input type="text" @input="funSearchData" class="form-control border-1" v-model="params.search_text" :placeholder="$t('Loan Code')" />
                    </div>
                    <ul class="list-group mb-3">
                        <button type="button" class="btn btn-success" @click="funSearchData"><i class="fa fa-search"></i> {{ $t('Search') }}</button>
                    </ul>
                    <ul class="list-group mb-3">
                        <button type="button" @click="printP" class="btn btn-primary"><i class="fa fa-print"></i> {{ $t('Print') }}</button>
                    </ul>
                    <ul class="list-group mb-3">
                        <button type="button" @click="exportExcell" class="btn btn-danger"><i class="fa fa-file-export"></i> {{ $t('Export') }}</button>
                    </ul>
                </div>
            </div>
        </template>

        <div slot="body">
            <div id="show-print">
                <div class="table-responsive table_scroll report_print">
                    <header-report :title="$t('Collateral Report')" style="display: none;"></header-report>
                    <table class="table table-bordered" id="excel-table">
                        <thead class="text-nowrap fixed_table">
                            <tr>
                                <th>{{$t("#") }}</th>
                                <th>{{$t("Loan Code")}}</th>
                                <th>{{$t("CO Name")}}</th>
                                <th>{{$t("Client Code")}}</th>
                                <th>{{$t("Client Name")}}</th>
                                <th>{{$t("Collateral Number")}}</th>
                                <th>{{$t("Collateral Name")}}</th>
                                <th>ប្រភេទឯកសារកម្មសិទ្ធិ</th>
                                <th>{{$t("Installment Date")}}</th>
                                <th>{{$t('Link')}}</th>
                                <th>{{$t("Status")}}</th>
                                <th class="d-print-none">{{ $t("Action")}}</th>
                            </tr>
                        </thead>
                        <tbody class="text-nowrap">
                            <tr v-for="(cat, index) in getDatas.data" :key="index">
                                <td>{{ index + 1 }}</td>
                                <td>{{ cat.loan_code }}</td>
                                <td>{{ cat.co_name }}</td>
                                <td>{{ cat.client_code }}</td>
                                <td>{{ cat.client_name }}</td>
                                <td>{{ cat.number }}</td>
                                <td>{{ cat.model_type }}</td>
                                <td>{{ cat.pawn_type }}</td>
                                <td>{{ cat.installment_date | onlyDate }}</td>
                                <td>
                                    <a :href="cat.link_map" target="_blank" v-if="cat.link_map" class="text-primary">{{ $t("Link") }}</a>
                                </td>
                                <!-- <td :class="cat.status_detail==2?'text-danger':'text-success'">
                                    {{ cat.status_detail==1?'បានដកពីធានា':'បានដាក់ធានា' }}
                                </td> -->
                                <td :class="cat.status_detail == 1 ? 'text-danger' : 'text-success'">
                                    {{ cat.status_detail == 1 ? 'បានដាក់ធានា' : 'បានដកពីធានា' }}
                                    </td>

                                    <td class="d-print-none">
                                    <button 
                                        v-show="cat.status_detail == 1 && cat.loan_status_id == 3"
                                        type="button"
                                        class="btn btn-danger s-btn-xs"
                                        :title="$t('Sub')" 
                                        @click="funSub(cat.collateral_detail_id)">
                                        <i class="fa-solid fa-minus fa-sm"></i>
                                    </button>

                                    <button 
                                        v-show="cat.status_detail == 2"
                                        type="button"
                                        class="btn btn-success s-btn-xs"
                                        :title="$t('Withdrawn')"
                                        :disabled="true">
                                        <i class="fa-solid fa-check-to-slot 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="getDatas" @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"; 
    import { exportTableToExcel } from "../../exportExcel.js"
    export default {
        components: {
            CumstomPagination,
            HeaderReport,
            FooterReport,
            ThemeTable
        },
        data() {
            return {
                getDatas: { data: [] },
                clients: [],
                coes: [],
                collateralDetail: [],
                form: new Form({

                }),
                params: {
                    search_text: "",
                    page: 1,
                    per_page: 25,
                    pagin:false,
                    collateral_detail_id: [],
                    client_id: [],
                    co_id: [],
                },
            };
        },
        created() {
            this.funGetCollateralDetail();
            this.getClient();
            this.getCO();
            this.funGetData();
        },
        methods: {
            funGetCollateralDetail() {
                axios
                    .get("/admin-api/com-collaterals-detail")
                    .then((res) => {
                        this.collateralDetail = 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);
                    });
            },
            getCO() {
                axios.get("admin-api/com-co").then((res) => {
                    this.coes = res.data;
                }).catch((error) => {
                    console.log(error);
                });
            },
            funGetData(page = 1) {
                this.params.page = page;
                axios
                    .get("admin-api/collateral-report", {
                        params: this.params,
                    })
                    .then((res) => {
                        this.getDatas = res.data;
                    })
                    .catch((error) => {
                        if (error.message == "Request failed with status code 403") {
                            this.$router.push({ name: "permissionTest" });
                        } else {
                            console.log(error.message);
                        }
                    });
            },
            funSub(collateral_detail_id) {
                this.$confirm({
                    message: "Are you sure?",
                    button: {
                        no: "No",
                        yes: "Yes",
                    },
                    callback: (confirm) => {
                        if (confirm) {
                            this.form
                                .put("admin-api/sub-loan-collateral/" + collateral_detail_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);
                                    }
                                });
                        }
                    },
                });
            },
            // dd(id) {
            //     this.$confirm({
            //         message: "Are you sure?",
            //         button: {
            //             no: "No",
            //             yes: "Yes",
            //         },
            //         callback: (confirm) => {
            //             if (confirm) {
            //                 this.form
            //                     .put("admin-api/sup-loan-collateral/" + id, {
            //                         params: this.params,
            //                     })
            //                     .then((res) => {
            //                         if (res.data.status == 1) {
            //                             // this.$toast.error(res.data.message);
            //                             this.$toast.error(res.data.message, {
            //                             icon: "fas fa-close",
            //                             });
            //                             this.funGetData();
            //                         } else {
            //                             this.$toast.warning(res.data.message); // or danger here too, if you want
            //                         }

            //                     });
            //             }
            //         },
            //     });
            // },
            funSearchData(){
                this.params.pagin = 'true';
                this.funGetData();
            },
            printP() {
                this.$htmlToPaper("show-print");
            },
            PageChange: function (e) {
                this.params.per_page = e.target.value;
                this.funGetData();
            },
            async exportExcell() {
                this.$isLoading(true)
                try {
                    await exportTableToExcel({
                        tableId: "excel-table",
                        filename: "ExportCollateral",
                        reportTitle: "របាយការណ៍ទ្រព្យធានា",
                        subDate:this.params.date,
                    })
                } catch (e) {
                    this.$toast.warning(e.message);
                } finally {
                    this.$isLoading(false)
                }
            }
        },
    };
</script>
<style scoped>
.toast-danger {
    background-color: #f44336 !important; /* Red */
    color: #fff !important;
}
</style>
