@extends('layout.admin.main')
@section('title', 'スタッフ管理（権限変更）')
@push('css')
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
<style>
    .bg-all {
        background-color: #08BF5A1A;
        background-clip: padding-box;
    }

    .disable-check {
        background-color: #EEEEEE;
    }

    #edit-role .disable-check .checkmark{
        background-color: #CCCCCC;
    }

    .btn-header:hover {
        opacity: 0.7;
    }

    [v-cloak] {
        display: none;
    }

    .name_feature {
        width: 366px;
        height: 40px;
        line-height: 20px;
        box-sizing: border-box;
        padding: 10px;
        border-right: 1px solid #DDDDDD;
        margin: -10px;
    }

    .check-all-access {
        width: 100px;
        margin: -10px;
        padding: 10px;
        box-sizing: border-box;
        border-right: 1px solid #DDDDDD;
    }

    .check-all-access:last-child {
        border-right: 0;
    }

    .item-feature:not(:first-child) .check-all-access,
    .item-feature:not(:first-child) .name_feature {
        /* margin-top: 10px; */
    }

    .item-feature .check-all-access,
    .item-feature .name_feature {
        border-bottom: 1px solid #DDDDDD;
    }

    .item-feature:last-child .check-all-access,
    .item-feature:last-child .name_feature {
        border-bottom: 0;
    }

    .featureChild:not(:first-child) {
        margin-top: 0 !important;
    }

    #role-table .role-name {
        padding: 0 10px;
    }
</style>
@endpush
@section('content')
<article class="sub" id="edit-role" v-cloak>
    <section class="mastereditstaff">
        <div class="header row">
            <h2 class="col-sm-6">操作権限を変更する</h2>
            <div class="col-sm-6">
                <button class="btn-header">
                    <img src="{{ asset('images/icon_material-library-books.png') }}" alt="" style="margin-right: 6px; font-weight: 600;">
                    <span style="font-size: 14px; font-weight: 600;">マニュアル</span>
                </button>
            </div>
        </div>
        <div class="container mt-5">
            <div style="font-size: 16px;color: #222222;margin-bottom: 10px;font-weight: bold;">対象のアカウント</div>
            <div style="margin-bottom: 30px;">
                <select @change="getSettingRoleAccess()" v-model="bot_id" class="form-control my_class" style="width: 360px;">
                    <option v-for="bot in listBot" :value="bot.id">@{{ bot.view_name }}</option>
                </select>
            </div>
            <form id="form_edit">
                <input type="hidden" name="_token" value="{{ csrf_token() }}" />
                <input type="hidden" name="bot_id" :value="bot_id" />
                <div class="row">
                    <div class="col-sm-10">
                        <table id="role-table">
                            <thead>
                                <tr>
                                    <th colspan="2" style="background: #fff !important"></th>
                                    <th>副管理者</th>
                                    <th>運用者</th>
                                    <th>サポート</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td style="padding: 10px;" colspan="2" class="role-name">機能を全選択／全解除</td>
                                    <td style="padding: 10px;" class="check-all-access1" :class="isCheckAll1 ? 'bg-all' : ''">
                                        <div class="custom-checkbox" @click="handleCheckAll('access1')" data-name="access1">
                                            <input type="checkbox" id="check-all-access1" v-model="isCheckAll1">
                                            <span class="checkmark"></span>
                                        </div>
                                    </td>
                                    <td style="padding: 10px;" class="check-all-access2" :class="isCheckAll2 ? 'bg-all' : ''">
                                        <div class="custom-checkbox" @click="handleCheckAll('access2')" data-name="access2">
                                            <input type="checkbox" id="check-all-access2" v-model="isCheckAll2">
                                            <span class="checkmark"></span>
                                        </div>
                                    </td>
                                    <td style="padding: 10px;" class="check-all-access3" :class="isCheckAll3 ? 'bg-all' : ''">
                                        <div class="custom-checkbox" @click="handleCheckAll('access3')" data-name="access3">
                                            <input type="checkbox" id="check-all-access3" v-model="isCheckAll3">
                                            <span class="checkmark"></span>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="padding: 10px;" colspan="2" class="role-name">新機能追加時に自動でチェックを入れる</td>
                                    <td style="padding: 10px;" class="check-all-access1 check-all-access" :class="newFeature.is_role_1 ? 'bg-all' : ''">
                                        <div class="custom-checkbox" @click="checkedNewFeature('role_1')" data-name="access1">
                                            <input type="checkbox" name="access1[0]" id="access1_0" v-model="newFeature.is_role_1">
                                            <span class="checkmark"></span>
                                        </div>
                                    </td>
                                    <td style="padding: 10px;" class="check-all-access2 check-all-access" :class="newFeature.is_role_2 ? 'bg-all' : ''">
                                        <div class="custom-checkbox" @click="checkedNewFeature('role_2')" data-name="access2">
                                            <input type="checkbox" name="access2[0]" id="access2_0" v-model="newFeature.is_role_2">
                                            <span class="checkmark"></span>
                                        </div>
                                    </td>
                                    <td style="padding: 10px;" class="check-all-access3 check-all-access" :class="newFeature.is_role_3 ? 'bg-all' : ''">
                                        <div class="custom-checkbox" @click="checkedNewFeature('role_3')" data-name="access3">
                                            <input type="checkbox" name="access3[0]" id="access3_0" v-model="newFeature.is_role_3">
                                            <span class="checkmark"></span>
                                        </div>
                                    </td>
                                </tr>
                                <tr v-for="(features, key) in listFeature">
                                    <td style="width: 146px;" class="group-role role-name">@{{key}}</td>
                                    <td colspan="4" class="role-name">
                                        <div class="item-feature" v-for="(feature, indexFeature) in features">
                                            <div style="display: flex;justify-content: space-between; padding: 10px 0;" v-if="feature.featureChilds.length == 0">
                                                <div class="name_feature">
                                                    @{{feature.name}}
                                                </div>
                                                <div class="check-all-access" :class="feature.role_1 ? 'bg-all' : ''">
                                                    <div class="custom-checkbox" @click="checkedFeature(key, 'role_1', indexFeature)" data-name="access1" style="top: 10px;">
                                                        <input type="checkbox" value="1" :checked="feature.role_1" :name="'access1['+feature.id+']'" :id="'access1_'+feature.id">
                                                        <span class="checkmark"></span>
                                                    </div>
                                                </div>
                                                <div class="check-all-access" :class="feature.role_2 ? 'bg-all' : ''">
                                                    <div class="custom-checkbox" @click="checkedFeature(key, 'role_2', indexFeature)" data-name="access2" style="top: 10px;">
                                                        <input type="checkbox" value="1" :checked="feature.role_2" :name="'access2['+feature.id+']'" :id="'access2_'+feature.id">
                                                        <span class="checkmark"></span>
                                                    </div>
                                                </div>
                                                <div class="check-all-access" :class="feature.role_3 ? 'bg-all' : ''">
                                                    <div class="custom-checkbox" @click="checkedFeature(key, 'role_3', indexFeature)" data-name="access3" style="top: 10px;">
                                                        <input type="checkbox" value="1" :checked="feature.role_3" :name="'access3['+feature.id+']'" :id="'access3_'+feature.id">
                                                        <span class="checkmark"></span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div v-else style="display: flex;justify-content: space-between;">
                                                <div class="name_feature" style="width: 150px; height: 135px;line-height: 110px;margin-top: 0;">
                                                    @{{feature.name}}
                                                </div>
                                                <div style="width: calc(100% - 150px);">
                                                    <div class="featureChild" v-for="(featureChild, indexChild) in feature.featureChilds" style="display: flex; height: 45px;margin-left: -10px;margin-right: -10px;align-items: center;border-bottom: 1px;border-bottom: 1px solid #DDDDDD;">
                                                        <div style="padding: 0 10px; height: 100%;line-height: 45px; width: 217px; border-right: 1px solid #DDDDDD;">
                                                            @{{ featureChild.name }}
                                                        </div>
                                                        <div class="check-all-access-child" :class="{'bg-all': featureChild.role_1 && checkCanEnable(feature.id, feature.featureChilds, featureChild.id, 'role_1'), 'disable-check': !checkCanEnable(feature.id, feature.featureChilds, featureChild.id, 'role_1')}" style="height: 44px;width: 100px;padding: 13px; border-right: 1px solid #DDDDDD;">
                                                            <div class="custom-checkbox" @click="checkedFeature(key, 'role_1', indexFeature, indexChild)" data-name="access1" style="top: 10px;">
                                                                <input type="checkbox" value="1" :checked="featureChild.role_1 && checkCanEnable(feature.id, feature.featureChilds, featureChild.id, 'role_1')"  :name="'access1['+featureChild.id+']'" :id="'access1_'+featureChild.id">
                                                                <span class="checkmark"></span>
                                                            </div>
                                                        </div>
                                                        <div class="check-all-access-child" :class="{'bg-all': featureChild.role_2 && checkCanEnable(feature.id, feature.featureChilds, featureChild.id, 'role_2'), 'disable-check': !checkCanEnable(feature.id, feature.featureChilds, featureChild.id, 'role_2')}" style="height: 44px;width: 101px;padding: 13px; border-right: 1px solid #DDDDDD;">
                                                            <div class="custom-checkbox" @click="checkedFeature(key, 'role_2', indexFeature, indexChild)" data-name="access2" style="top: 10px;">
                                                                <input type="checkbox" value="1" :disabled="!feature.featureChilds[0].role_2" :checked="featureChild.role_2 && checkCanEnable(feature.id, feature.featureChilds, featureChild.id, 'role_2')" :name="'access2['+featureChild.id+']'" :id="'access2_'+featureChild.id">
                                                                <span class="checkmark"></span>
                                                            </div>
                                                        </div>
                                                        <div class="check-all-access-child" :class="{'bg-all': featureChild.role_3 && checkCanEnable(feature.id, feature.featureChilds, featureChild.id, 'role_3'), 'disable-check': !checkCanEnable(feature.id, feature.featureChilds, featureChild.id, 'role_3')}" style="height: 44px;width: 100px;padding: 13px;">
                                                            <div class="custom-checkbox" @click="checkedFeature(key, 'role_3', indexFeature, indexChild)" data-name="access3" style="top: 10px;">
                                                                <input type="checkbox" value="1" :disabled="!feature.featureChilds[0].role_3" :checked="featureChild.role_3 && checkCanEnable(feature.id, feature.featureChilds, featureChild.id, 'role_3')" :name="'access3['+featureChild.id+']'" :id="'access3_'+featureChild.id">
                                                                <span class="checkmark"></span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="row">
                    <button type="button" @click="submitForm()" class="btn-save-common">保存する</button>
                </div>
                <div class="row link">
                    <a href="{{ route('employeesManagement') }}">スタッフ管理に戻る</a>
                </div>
            </form>
        </div>

    </section>
</article>
@endsection
@push('script')
    <script src="/js/form_answer/jquery.min.js"></script>
    <script src="/js/form_answer/bootstrap.min.js"></script>
<script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
<script src="/js/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
{{--<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>--}}
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script>
    var urlAction = "{{ route('addSettingRoleAccess') }}";

    function isCheckAll(name) {
        var checkboxes = $('input[name^="' + name + '["]')
        var allChecked = checkboxes.length === checkboxes.filter(':checked').length;

        checkboxes.each(function() {
            console.log($(this), $(this).is(':checked'));
            if ($(this).is(':checked')) {
                $(this).parents('.check-all-access').addClass('bg-all');
                $(this).parents('.check-all-access-child').addClass('bg-all');
            } else {
                $(this).parents('.check-all-access').removeClass('bg-all');
                $(this).parents('.check-all-access-child').removeClass('bg-all');
            }
        });


        if (allChecked) {
            $('#check-all-' + name).not('.check-all-access').prop('checked', true)
            $('.check-all-' + name).not('.check-all-access').addClass('bg-all')
        } else {
            $('#check-all-' + name).not('.check-all-access').prop('checked', false)
            $('.check-all-' + name).not('.check-all-access').removeClass('bg-all')
        }
    }

    let settingRole = new Vue({
        el: '#edit-role',
        data: {
            listFeature: [],
            newFeature: [],
            bot_id: null,
            listBot: [],
            isCheckAll1: false,
            isCheckAll2: false,
            isCheckAll3: false,
        },
        created() {

            var botId = (new URL(location.href)).searchParams.get('bot_id');
            this.bot_id = botId != undefined ? botId : null;

            this.getSettingRoleAccess();
        },
        computed: {

        },
        watch: {
            isCheckAll1: function(newValue) {
                
            },
            isCheckAll2: function(newValue) {
                
            },
            isCheckAll3: function(newValue) {
                
            },
            listFeature: function(newValue) {
                if(Object.keys(this.listFeature).length > 0){
                    this.isCheckAll1 = true;
                    this.isCheckAll2 = true;
                    this.isCheckAll3 = true;
                    for (let element in this.listFeature) {
                        for (let elementFeature in this.listFeature[element]) {
                            let role_1 = this.listFeature[element][elementFeature].role_1;
                            let role_2 = this.listFeature[element][elementFeature].role_2;
                            let role_3 = this.listFeature[element][elementFeature].role_3;
                            if (!role_1) {
                                this.isCheckAll1 = false;
                            }
                            if (!role_2) {
                                this.isCheckAll2 = false;
                            }
                            if (!role_3) {
                                this.isCheckAll3 = false;
                            }
                            if (this.listFeature[element][elementFeature].featureChilds.length > 0) {
                                for (let elementChild in this.listFeature[element][elementFeature].featureChilds) {
                                    let child_role_1 = this.listFeature[element][elementFeature].featureChilds[elementChild].role_1;
                                    let child_role_2 = this.listFeature[element][elementFeature].featureChilds[elementChild].role_2;
                                    let child_role_3 = this.listFeature[element][elementFeature].featureChilds[elementChild].role_3;
                                    if (!child_role_1) {
                                        this.isCheckAll1 = false;
                                    }
                                    if (!child_role_2) {
                                        this.isCheckAll2 = false;
                                    }
                                    if (!child_role_3) {
                                        this.isCheckAll3 = false;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        },
        mounted() {

        },
        methods: {
            handleCheckAll(name) {
                console.log(name);
                if (name == 'access1') {
                    if (this.isCheckAll1) {
                        this.isCheckAll1 = false;
                    } else {
                        this.isCheckAll1 = true;
                    }
                    if (!this.isCheckAll1) {
                        this.newFeature.is_role_1 = 0;
                        for (let element in this.listFeature) {
                            for (let elementFeature in this.listFeature[element]) {
                                this.listFeature[element][elementFeature].role_1 = 0;
                                if (this.listFeature[element][elementFeature].featureChilds.length > 0) {
                                    for (let elementChild in this.listFeature[element][elementFeature].featureChilds) {
                                        this.listFeature[element][elementFeature].featureChilds[elementChild].role_1 = 0;
                                    }
                                }
                            }
                        }
                    } else {
                        this.newFeature.is_role_1 = 1;
                        for (let element in this.listFeature) {
                            for (let elementFeature in this.listFeature[element]) {
                                this.listFeature[element][elementFeature].role_1 = 1;
                                if (this.listFeature[element][elementFeature].featureChilds.length > 0) {
                                    for (let elementChild in this.listFeature[element][elementFeature].featureChilds) {
                                        this.listFeature[element][elementFeature].featureChilds[elementChild].role_1 = 1;
                                    }
                                }
                            }
                        }
                    }
                } else if (name == 'access2') {
                    if (this.isCheckAll2) {
                        this.isCheckAll2 = false;
                    } else {
                        this.isCheckAll2 = true;
                    }
                    if (!this.isCheckAll2) {
                        this.newFeature.is_role_2 = 0;
                        for (let element in this.listFeature) {
                            for (let elementFeature in this.listFeature[element]) {
                                this.listFeature[element][elementFeature].role_2 = 0;
                                if (this.listFeature[element][elementFeature].featureChilds.length > 0) {
                                    for (let elementChild in this.listFeature[element][elementFeature].featureChilds) {
                                        this.listFeature[element][elementFeature].featureChilds[elementChild].role_2 = 0;
                                    }
                                }
                            }
                        }
                    } else {
                        this.newFeature.is_role_2 = 1;
                        for (let element in this.listFeature) {
                            for (let elementFeature in this.listFeature[element]) {
                                this.listFeature[element][elementFeature].role_2 = 1;
                                if (this.listFeature[element][elementFeature].featureChilds.length > 0) {
                                    for (let elementChild in this.listFeature[element][elementFeature].featureChilds) {
                                        this.listFeature[element][elementFeature].featureChilds[elementChild].role_2 = 1;
                                    }
                                }
                            }
                        }
                    }
                } else {
                    if (this.isCheckAll3) {
                        this.isCheckAll3 = false;
                    } else {
                        this.isCheckAll3 = true;
                    }
                    if (!this.isCheckAll3) {
                    this.newFeature.is_role_3 = 0;
                        for (let element in this.listFeature) {
                            for (let elementFeature in this.listFeature[element]) {
                                this.listFeature[element][elementFeature].role_3 = 0;
                                if (this.listFeature[element][elementFeature].featureChilds.length > 0) {
                                    for (let elementChild in this.listFeature[element][elementFeature].featureChilds) {
                                        this.listFeature[element][elementFeature].featureChilds[elementChild].role_3 = 0;
                                    }
                                }
                            }
                        }
                    } else {
                        this.newFeature.is_role_3 = 1;
                        for (let element in this.listFeature) {
                            for (let elementFeature in this.listFeature[element]) {
                                this.listFeature[element][elementFeature].role_3 = 1;
                                if (this.listFeature[element][elementFeature].featureChilds.length > 0) {
                                    for (let elementChild in this.listFeature[element][elementFeature].featureChilds) {
                                        this.listFeature[element][elementFeature].featureChilds[elementChild].role_3 = 1;
                                    }
                                }
                            }
                        }
                    }
                }
            },
            checkedNewFeature(role) {
                if (role == 'role_1') {
                    if (this.newFeature.is_role_1 == 1) {
                        this.newFeature.is_role_1 = 0;
                    } else {
                        this.newFeature.is_role_1 = 1;
                    }
                } else if (role == 'role_2') {
                    if (this.newFeature.is_role_2 == 1) {
                        this.newFeature.is_role_2 = 0;
                    } else {
                        this.newFeature.is_role_2 = 1;
                    }
                } else {
                    if (this.newFeature.is_role_3 == 1) {
                        this.newFeature.is_role_3 = 0;
                    } else {
                        this.newFeature.is_role_3 = 1;
                    }
                }
            },
            checkCanEnable(parentId, featureChilds, idChild, key) {

                if(parentId != featureChilds[0].id) {
                    return true;
                }


                if (idChild == featureChilds[1].id || idChild == featureChilds[2].id) {

                    // console.log('parentId', parentId, featureChilds, idChild, key)
                    var permissionStaffManagement = featureChilds[0];
                    // console.log('permissionStaffManagement', permissionStaffManagement)
                    if (permissionStaffManagement[key] == 0) {
                        // console.log('vvv', permissionStaffManagement[key])
                        return false
                    }
                }

                return true;
            },
            checkedFeature(index, role, indexFeature, indexChild = null) {
                if (indexChild == null) {
                    if (role == 'role_1') {
                        var old = this.listFeature[index][indexFeature].role_1;
                        if (old == 1) {
                            this.listFeature[index][indexFeature].role_1 = 0;
                        } else {
                            this.listFeature[index][indexFeature].role_1 = 1;
                        }
                    } else if (role == 'role_2') {
                        var old = this.listFeature[index][indexFeature].role_2;
                        if (old == 1) {
                            this.listFeature[index][indexFeature].role_2 = 0;
                        } else {
                            this.listFeature[index][indexFeature].role_2 = 1;
                        }
                    } else {
                        var old = this.listFeature[index][indexFeature].role_3;
                        if (old == 1) {
                            this.listFeature[index][indexFeature].role_3 = 0;
                        } else {
                            this.listFeature[index][indexFeature].role_3 = 1;
                        }
                    }
                } else {

                    var feature = this.listFeature[index][indexFeature];
                    var featureChild = feature.featureChilds[indexChild];
                    var checkCan = this.checkCanEnable(feature.id, feature.featureChilds, featureChild.id, role, indexChild)

                    if (!checkCan) {
                        this.listFeature[index][indexFeature]['featureChilds'][indexChild][role] = 0;
                        return
                    }

                    if (role == 'role_1') {
                        var old = this.listFeature[index][indexFeature]['featureChilds'][indexChild].role_1;
                        if (old == 1) {
                            this.listFeature[index][indexFeature]['featureChilds'][indexChild].role_1 = 0;
                        } else {
                            this.listFeature[index][indexFeature]['featureChilds'][indexChild].role_1 = 1;
                        }
                    } else if (role == 'role_2') {
                        var old = this.listFeature[index][indexFeature]['featureChilds'][indexChild].role_2;
                        if (old == 1) {
                            this.listFeature[index][indexFeature]['featureChilds'][indexChild].role_2 = 0;
                        } else {
                            this.listFeature[index][indexFeature]['featureChilds'][indexChild].role_2 = 1;
                        }
                    } else {
                        var old = this.listFeature[index][indexFeature]['featureChilds'][indexChild].role_3;
                        if (old == 1) {
                            this.listFeature[index][indexFeature]['featureChilds'][indexChild].role_3 = 0;
                        } else {
                            this.listFeature[index][indexFeature]['featureChilds'][indexChild].role_3 = 1;
                        }
                    }
                }
            },
            getSettingRoleAccess() {
                let self = this;
                $.ajax({
                    url: '/ajax/get-setting-role-access',
                    type: 'GET',
                    data: {
                        bot_id: self.bot_id,
                    },
                    success: function(res) {
                        self.listFeature = res.listFeature;
                        self.newFeature = res.newFeature;
                        console.log(self.newFeature);
                        self.bot_id = res.bot_id;
                        self.listBot = res.listBot;
                    }
                })
            },
            submitForm() {
                var postdata = $('#form_edit').serialize();
                $.ajax({
                    url: urlAction,
                    type: 'POST',
                    data: postdata,
                    beforeSend: function() {

                    },
                    success: function(b) {
                        Toastify({
                            text: '編集が保存されました',
                            duration: 3000,
                            newWindow: true,
                            close: true,
                            className: "toastCalendar",
                            avatar: '/images/circle-check.svg',
                            gravity: "bottom", // `top` or `bottom`
                            position: "right", // `left`, `center` or `right`
                            stopOnFocus: true, // Prevents dismissing of toast on hover
                            offset: {
                                y: 30
                            },
                            style: {
                                background: '#F5FDF9',
                                boxShadow: '0px 2px 4px #00000029',
                                borderRadius: '5px',
                                display: 'flex',
                                alignItems: 'center',
                                color: '#08BF5A',
                                width: '250px',
                                height: '40px',
                                padding: '0',
                            },
                        }).showToast();
                    },
                    error: function(a, b, c) {

                    }
                });
            }
        }
    })
</script>
@endpush