<template>
    <theme-table :noneActions="true">
        <span slot="main-title">
            {{ $t('Currency') }}
        </span>

        <template slot="more-button">
            <input type="search" class="rounded form-control" style="width: 230px"  @input="Searching" :placeholder="$t('Search')" autocomplete="off">
        </template>
        
        <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("Currency EN") }}</th>
                            <th>{{ $t("Currency KM") }}</th>
                            <th>{{ $t("Symbol") }}</th>
                            <!-- <th>{{ $t("Action") }}</th> -->
                        </tr>
                    </thead>
                    <tbody class="text-nowrap">
                        <tr v-for="(curr, index) in currency.data" :key="index">
                            <td> {{ index + 1 }} </td>
                            <td>{{ curr.currency_en }}</td>
                            <td>{{ curr.currency_km }}</td>
                            <td>{{ curr.symbol }}</td>
                            <!-- <td>
                                <router-link :to="{ name: 'CurrencyCreate',params:{id:curr.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 type="button" :title="$t('Delete')" @click="funDelete(curr.id)"
                                    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="currency" @onChangePage="funGetData($event)"></cumstom-pagination>
        </div>
    </theme-table>
</template>
<script>
import ActiveStatus from '../../components/ActiveStatus.vue'

import CumstomPagination from '../../components/CustomPagination.vue'
import ThemeTable from '../../components/ThemeTable.vue'
export default {
    components: {
        ActiveStatus,
        
        CumstomPagination,
        ThemeTable

    },
    data() {
        return {
            currency: [],
            form: new Form({
                'id': '',
                'name_en': '',
                'name_km': '',
                'phone': '',
                'address': '',
            }),
            params: {
                page: 1,
                per_page: 25,
            }
        }
    },

    created() {
        this.funGetData();
    },
    methods: {
        funDelete(id) {
            this.$confirm({
                message: 'Are you sure?',
                button: {
                    no: 'No',
                    yes: 'Yes'
                },
                callback: confirm => {
                    if (confirm) {
                        this.form.delete("admin-api/currency/" + id).then((res) => {
                            if (res.data.status == 1) {
                                this.$toast.success(res.data.message);
                                this.funGetData();
                            } else {
                                this.$toast.warning(res.data.message);
                            }
                        })
                    }
                }
            });
        },
        funGetData(page = 1) {

            this.params.page = page;
            axios.get('admin-api/currency', {
                params: this.params
            }).then((res) => {
                this.currency = res.data;

            }).catch((error) => {
                console.log(error);
            });
        },

        submitData() {
            this.form.post("admin-api/currency").then((res) => {
                if (res.data.status == 1) {
                    this.form.reset();
                    this.$toast.success(res.data.message);
                    $("#CurrencyForm").modal("hide");
                    this.funGetData();
                } else {
                    this.$toast.warning(res.data.message);
                }

            }).catch((error) => {

                console.log(error);
            })
        },
        funForm(id) {
            axios.get('admin-api/currency/create', {
                params: { 'id': id }
            }).then((res) => {
                if (res.data.status == 1) {
                    this.form.fill(res.data.data);
                } else {
                    this.form.reset();
                }
                $("#CurrencyForm").modal("show");
            });
        },

        PageChange: function (e) {
            this.params.per_page = e.target.value;
            this.funGetData();
        },
        Searching(e) {
            // this.params.search_text = e.target.value;
            this.funGetData();
        }
    }
}
</script>
