<template>
    <theme-table :newButton="true" :permisName="'Cash Transfer Request List'" @click="funShowModal()" @input="Searching">
        <span slot="main-title">
            {{ $t('Cash Transfer Request List') }}
        </span>
        <div slot="body">
            <div class="table-responsive table_scroll">
                <table class="table table-bordered">
                    <thead>
                        <tr class="border-top border-bottom text-nowrap">
                            <th>{{ $t("#") }}</th>
                            <th>{{ $t("Branch Code") }}</th>
                            <th>{{ $t("Currency") }}</th>
                            <th>{{ $t("Request by") }}</th>
                            <th>{{ $t("Amount") }}</th>
                            <th>{{ $t("Date Request") }}</th>
                            <th>{{ $t("Purpose") }}</th>
                            <th>{{ $t("Branch") }}</th>
                            <th>{{ $t("Status") }}</th>
                            <th class="text-nowrap hidden_p" v-show="user_branch != -1">{{ $t("Action") }}</th>
                        </tr>
                    </thead>
                    <tbody class="text-nowrap">
                        <tr v-for="(value, index) in data_response.data" :key="index">
                            <td> {{ index + 1 }} </td>
                            <td>{{ value.branch_code }}</td>
                            <td>{{ value.currency_name }}</td>
                            <td>{{ value.request_name }}</td>
                            <td>{{ value.amount | numberFomartValue}}</td>
                            <td>{{ value.date_request | onlyDate }}</td>
                            <td>{{ value.purpose }}</td>
                            <td>{{ value.branch_name }}</td>
                            <td>{{ value.status_name }}</td>
                            <td v-show="user_branch != -1">
                                <button type="button" v-show="value.status==1" @click="funRequest(value.id)" class="btn btn-primary s-btn-xs">
                                    <i class="fa-solid fa-check-to-slot fa-sm"></i>
                                </button>
                                <button type="button" v-if="$can('Cash Transfer Request Edit')" v-show="value.status==1" @click="funShowModal(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('Cash Transfer Request Delete')" v-show="value.status==1" @click="funDelete(value.parent_id)" type="button" class="btn btn-danger btn-sm s-btn-xs">
                                    <i class="fa-solid fa-trash-can fa-sm"></i>
                                </button>
                                <button type="button" v-show="value.status==2" @click="funApprove(value.id)" class="btn btn-warning s-btn-xs">
                                    <i class="fa-solid fa-check-to-slot fa-sm"></i>
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <cumstom-pagination :pageShow="true" @PageChange="PageChange($event)" :data="data_response" @onChangePage="funGetData($event)"></cumstom-pagination>
        </div>

        <div slot="modal-custom">
            <form method="post" role="form">
                <div class="modal fade" id="modalShowForm" aria-hidden="true" role="dialog" data-backdrop="static">
                    <div class="modal-dialog modal-xl">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title">{{ $t("Cash Transfer Request") }}</h4>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <div class="row">
                                    <div class="col-4 col-xxl-4 col-xl-4 col-lg-6 col-md-6 mb-3">
                                        <label class="form-label">{{ $t("Amount") }} <span class="text-danger">*</span></label>
                                        <input type="number" min="0" class="form-control" v-model="form.amount" :placeholder="$t('Amount')" />
                                        <div class="text-danger" v-if="form.errors.has('amount')" v-html="form.errors.get('amount')"></div>
                                    </div>
                                    <div class="col-4 col-xxl-4 col-xl-4 col-lg-6 col-md-6 mb-3">
                                        <label class="form-label">{{ $t("Request By") }} <span class="text-danger">*</span></label>
                                        <Multiselect :placeholder="$t('Chart Code')" :searchable="true" :options="dataCashBanks" label="chart_code_name" trackBy="chart_code_name" value="id" v-model="form.request_by" />
                                        <div class="text-danger" v-if="form.errors.has('request_by')" v-html="form.errors.get('request_by')"></div>
                                    </div>
                                    <div class="col-4 col-xxl-4 col-xl-4 col-lg-6 col-md-6 mb-3">
                                        <label class="form-label">{{ $t("Date Request") }} <span class="text-danger">*</span></label>
                                        <date-picker v-model="form.date_request" valueType="format" :format="format" :class="{'is-invalid': form.errors.has('date_request') }"></date-picker>
                                        <div class="text-danger" v-if="form.errors.has('date_request')" v-html="form.errors.get('date_request')"></div>
                                    </div>
                                    <div class="col-12 col-xxl-12 col-xl-12 col-lg-6 col-md-6 mb-3">
                                        <label class="form-label">{{$t('Purpose')}}</label>
                                        <textarea :placeholder="$t('Purpose')" class="form-control" v-model="form.purpose" :class="{'is-invalid': form.errors.has('purpose') }" rows="3"></textarea>
                                        <div class="text-danger" v-if="form.errors.has('purpose')" v-html="form.errors.get('purpose')"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">{{ $t("Close") }}</button>
                                <button type="button" :disabled="params.busy || form.submitting" class="btn btn-primary" @click="funSubmitData()">
                                    <!-- <img :src="params.busy ? ' /icons/loading.gif ' : '/icons/save.png'" alt="" /> -->
                                    {{$t('Submit')}}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </theme-table>
</template>
<script>
    import ThemeTable from "../../../components/ThemeTable.vue";
    import CumstomPagination from "../../../components/CustomPagination.vue";
    export default {
        components: {
            ThemeTable,
            CumstomPagination,
        },
        data() {
            return {
                format: "YYYY-MM-DD",
                data_response: {},
                dataCashBanks: [],
                user_branch  : '',
                form: new Form({
                    id: "",
                    request_by: null,
                    amount: null,
                    purpose: null,
                    date_request: new Date().toISOString(),
                    submitting : false,
                }),
                params: {
                    page: 1,
                    per_page: 25,
                    search_text: "",
                },
                per_page: "",
                current_page: "",
                to_page: "",
                total_page: "",
            };
        },

        created() {
            this.funGetData();
            this.funGetCashBank();
            this.funComUserBranch();
        },
        methods: {
            funGetCashBank() {
                axios
                    .get("accounting/com-cash-bank")
                    .then((res) => {
                        this.dataCashBanks = res.data;
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            },
            funGetData(page = 1) {
                this.params.page = page;
                axios.get("admin-api/cash-transfer-request", {
                    params: this.params,
                }).then((res) => {
                    this.data_response = 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();
            },
            funShowModal(id) {
                if(this.user_branch == -1){
                    this.$toast.warning('អ្នកកំពុងស្ថិតនៅការិយាល័យកណ្តាល!');
                } else {
                    if(id){
                        axios.get("admin-api/cash-transfer-request/create", {
                            params: { id: id },
                        }).then((res) => {
                            if (res.data.status == 1) {
                                this.form.fill(res.data.data);
                            }
                        }).catch((error) => {
                            if (error.message == "Request failed with status code 403") {
                                this.$router.push({ name: "permissionTest" });
                            } else {
                                console.log(error.message);
                            }
                        });
                    }
                    else{
                        this.form.reset();
                    }
                    $("#modalShowForm").modal("show");


                }
            },
            funSubmitData() {
                if (this.form.submitting) {
                    return;
                }
                this.form.submitting = true;
                this.form
                    .post("admin-api/cash-transfer-request")
                    .then((res) => {
                        if (res.data.status == 1) {
                            this.$toast.success(res.data.message);
                            $("#modalShowForm").modal("hide");
                        } else {
                            this.$toast.warning(res.data.message);
                        }
                    }).catch((error) => {
                        console.log(error);
                        this.$toast.warning(res.data.message);
                    }).finally(() => {
                        this.form.submitting = false;
                    });
            },
            funRequest(id){
                this.form.status = 2;
                this.$confirm({
                    message: "Are you sure?",
                    button: {
                        no: "No",
                        yes: "Yes",
                    },
                    callback: (confirm) => {
                        if (confirm) {
                            this.form.put("admin-api/cash-transfer-request/" + id).then((res) => {
                                if (res.data.status == 1) {
                                    this.$toast.success(res.data.message);
                                    this.funGetData();
                                } else {
                                    this.$toast.warning(res.data.message);
                                }
                            });
                        }
                    },
                });
            },
            funApprove(id){
                this.form.status = 3;
                this.$confirm({
                    message: "Are you sure?",
                    button: {
                        no: "No",
                        yes: "Yes",
                    },
                    callback: (confirm) => {
                        if (confirm) {
                            this.form.put("admin-api/cash-transfer-request/" + id).then((res) => {
                                if (res.data.status == 1) {
                                    this.$toast.success(res.data.message);
                                    this.funGetData();
                                } else {
                                    this.$toast.warning(res.data.message);
                                }
                            });
                        }
                    },
                });
            },
            funDelete(id) {
                this.$confirm({
                    message: "Are you sure?",
                    button: {
                        no: "No",
                        yes: "Yes",
                    },
                    callback: (confirm) => {
                        if (confirm) {
                            this.form.delete("admin-api/cash-transfer-request/" + id).then((res) => {
                                if (res.data.status == 1) {
                                    this.$toast.success(res.data.message);
                                    this.funGetData();
                                } else {
                                    this.$toast.warning(res.data.message);
                                }
                            });
                        }
                    },
                });
            },
        },
    };
</script>
