<template>
    <theme-table :noneActions="true">
        <span slot="main-title">
            <div class="mb-3">
                {{ $t('Role') }}
            </div>
        </span>

        <div slot="body">
            <label class="w-100 p-0 mb-4">
                <label for="">Role Name <sup class="text-danger">*</sup> </label>
                <input class="form-control" type="text" :class="{ 'is-invalid': form.errors.has('name') }" v-model="form.name" />
            </label>
            <div class="border position-relative rounded mb-3">
                <div class="mb-5">
                    <div class="checkbox_all ms-1">
                        <div @click="checkAll()">
                            <label class="text-nowrap" for="" style="line-height: 15px;">
                                <input type="checkbox" v-model="form.check_all" />
                                <span class="ms-1">Select all permission</span>
                            </label>
                        </div>
                    </div>
                </div>

                <div class="position-relative rounded d-flex row flex-wrap px-3">
                    <div class="position-relative px-2 col-sm-3" style="margin-bottom: 30px;" v-for="(per, i) in form.permission" :key="'Permission'+i">
                        <div class="h-100 pt-3 pb-2 rounded px-2 border">
                            <div class="checkbox_all">
                                <label class="text-nowrap" for="" style="line-height: 15px;" @click="checkGroup(i)"> <input type="checkbox" v-model="per.check_group" /> <span class="ms-1">{{per.group_prefix}}</span> </label>
                            </div>
                            <div v-for="sub in per.children" :key="sub.id">
                                <label :for="'permission_' + sub.name" style="line-height: 15px;">
                                    <input :id="'permission_' + sub.name" type="checkbox" v-model="sub.allow" :value="sub.name" />
                                    <span class="ms-1">{{ sub.name }}</span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="d-flex justify-content-end">
                <button type="button" class="btn btn-dark me-2"><i class="fa-solid fa-arrow-left"></i> {{ $t('Close') }}</button>
                <button type="submit" :disabled="form.busy" class="btn btn-success" @click="submitData">
                    <i class="fa-solid fa-floppy-disk"></i>
                    {{ $t('Submit') }}
                </button>
            </div>
        </div>
    </theme-table>
</template>
<script>

import ThemeTable from '../../../components/ThemeTable.vue'
    export default {
        components: {
            ThemeTable
        },
        data() {
            return {
                form: new Form({ 
                    id: "",
                    name: "",
                    check_all: "",
                    permission: "",
                }),
            };
        },
        mounted() {
            this.getShow();
        },
        methods: {
            getShow() {
                axios
                    .get("system/get-permission/" + this.$route.params.id)
                    .then((res) => {
                        this.form.fill(res.data);
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            },
            checkAll: function () {
                this.form.check_all = !this.form.check_all;
                if (this.form.check_all) {
                    for (let index = 0; index < this.form.permission.length; index++) {
                        this.form.permission[index].check_group = true;
                        for (let j = 0; j < this.form.permission[index].children.length; j++) {
                            this.form.permission[index].children[j].allow = true;
                        }
                    }
                } else {
                    for (let index = 0; index < this.form.permission.length; index++) {
                        this.form.permission[index].check_group = false;
                        for (let j = 0; j < this.form.permission[index].children.length; j++) {
                            this.form.permission[index].children[j].allow = false;
                        }
                    }
                }
            },
            checkGroup: function (index) {
                this.form.permission[index].check_group = !this.form.permission[index].check_group;
                if (this.form.permission[index].check_group) {
                    for (let j = 0; j < this.form.permission[index].children.length; j++) {
                        this.form.permission[index].children[j].allow = true;
                    }
                } else {
                    for (let j = 0; j < this.form.permission[index].children.length; j++) {
                        this.form.permission[index].children[j].allow = false;
                    }
                }
            },
            submitData() {
                this.form.post("system/roles").then((res) => {
                    if (res.data.status == 1) {
                        this.getShow();
                        this.$router.push({ name: "UserRole" });
                        this.$toast.success(res.data.message);
                    } else {
                        this.$toast.warning(res.data.message);
                    }
                });
            },
        },
    };
</script>
<style lang="scss" scoped>
    .user-role {
        background: #f5f5ff;
        padding: 15px;
        margin-bottom: 15px;
    }

    table.user-roles tr td {
        vertical-align: top !important;
        background: rgb(233, 236, 239);
    }

    label {
        vertical-align: top;
        padding: 5px;
    }
    .checkbox_all {
        top: -16px;
        left: 20px;
        border-radius: 6px;
        border: var(--bs-border-color) solid 1px;
        position: absolute;
        user-select: none;
        background: var(--bs-body-bg);
        label {
            vertical-align: top;
            padding: 7px 8px;
            line-height: 15px;
        }
    }
</style>
