<template>
    <theme-table :newButton="true" :permisName="'Manage Group CO Create'" @click="funshowForm" @input="Searching">
        <span slot="main-title">
            {{ $t('Manage Group CO') }}
        </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('Team Leader') }}</th>
                            <th>{{ $t('Member') }}</th>
                            <th>{{ $t('Branch') }}</th>
                            <th v-show="user_branch != -1">{{ $t("Action") }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(value, index) in groupData.data" :key="index">
                            <td> {{ index + 1 }} </td>
                            <td>{{ value.name }}</td>
                            <td v-if="user_branch != -1">
                                <span v-for="(detail) in value.detail" :key="index+detail.id">
                                    <span :class="detail.branch_id==1?'badge bg-primary me-1':'badge bg-info me-1'">
                                        <router-link :to="{name:'UserCreate',params:{id:detail.co_id}}"  target="_blank" class="text-white">
                                            {{ detail.name }}
                                        </router-link>
                                    </span>
                                </span>
                            </td>
                            <td v-else>
                                <span v-for="(detail) in value.detail" :key="index+detail.id">
                                    <span :class="detail.branch_id==1?'badge bg-primary me-1':'badge bg-info me-1'">{{ detail.name }}</span>
                                </span>
                            </td>
                            <td v-if="user_branch == -1">
                                <span v-for="(sub_val) in value.detail_branch" :key="index+sub_val.id">
                                    <span :class="sub_val.branch_id==1?'badge bg-primary me-1':'badge bg-info me-1'">{{ sub_val.name_km }}</span>
                                </span>
                            </td>
                            <td v-else>{{ value.branch_name }}</td>
                            <td v-show="user_branch != -1">
                                <button v-if="$can('Manage Group CO Edit')" @click="funshowForm(value)" type="button" :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('Manage Group CO Delete')" type="button" :title="$t('Delete')" @click="funDelete(value.user_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="groupData" @onChangePage="funGetData($event)"></cumstom-pagination>
        </div>
        <div slot="modal-custom">
            <GroupForm :form="form" @submitData="submitData"></GroupForm>
        </div>
    </theme-table>
</template>

<script>
    import GroupForm from './GroupForm.vue';
    import ThemeTable from '../../../components/ThemeTable.vue';
    import CumstomPagination from '../../../components/CustomPagination.vue';
    export default {
        components: {
            GroupForm,
            ThemeTable,
            CumstomPagination,
        },
        data() {
            return {
                groupData: {},
                user_branch : '',
                form: new Form({
                    'id'     : "",
                    'status' : "",
                    'desc'   : "",
                    'user_id': "",
                    'co_id'  : [],
                }),
                params: {
                    page: 1,
                    per_page: 25,
                    search_text: '',
                    type: 1
                },
            }
        },
        created() {
            this.funGetData();
            this.funComUserBranch();
        },
        methods: {
            funGetData(page = 1) {
                this.params.page = page;
                axios.get('admin-api/manage-group-co', {
                    params: this.params
                }).then((res) => {
                    if (res.data == this.noPermission) {
                        this.$router.push({ name: 'noPermission' });
                    }
                    this.groupData = 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();
            },
            funshowForm(group) {
                if(this.user_branch == -1){
                    this.$toast.warning('អ្នកកំពុងស្ថិតនៅការិយាល័យកណ្តាល!');
                } else {
                    axios.get('admin-api/manage-group-co/create', {
                        params: { 'id': group.id }
                    }).then((res) => {
                        if (res.data.status == 1) {
                            this.form.id      = res.data.data.id;
                            this.form.user_id = res.data.data.user_id;
                            this.form.co_id   = res.data.data.detail.map(detail => detail.co_id);
                        } else {
                            this.form.reset();
                        }
                        $("#groupForm").modal("show");
                    });
                }
            },
            submitData(){
                this.form.post("admin-api/manage-group-co").then((res) => {
                    if (res.data.status == 1) {
                        this.$toast.success(res.data.message);
                        this.funGetData();
                    } else {
                        this.$toast.warning(res.data.message);
                    }
                    $("#groupForm").modal("hide");
                }).catch((error) => {
                    console.log(error);
                    this.$toast.warning(res.data.message);
                })
            },
            funActive(id) {
                axios.put("admin-api/manage-group-co/" + id)
                    .then((res) => {
                        if (res.data.status == 1) {
                            this.funGetData();
                            this.$toast.success(res.data.message);
                        }
                        else if (res.data.status == 2) {
                            this.funGetData();
                            this.$toast.success(res.data.message);
                        } else {
                            this.$toast.warning(res.data.message);
                        }
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            },
            funDelete(user_id) {
                this.$confirm({
                    message: 'Are you sure?',
                    button: {
                        no: 'No',
                        yes: 'Yes'
                    },
                    callback: confirm => {
                        if (confirm) {
                            this.form.delete("admin-api/manage-group-co/" + user_id).then((res) => {
                                if (res.data.status == 1) {
                                    this.$toast.success(res.data.message);
                                    this.funGetData();
                                } else {
                                    this.$toast.warning(res.data.message);
                                }
                            })
                        }
                    }
                });
            },
        }
    }
</script>