@extends('admin.layouts.default')

{{-- Page title --}}
@section('title')
    Role permissions
    @parent
@stop

{{-- page level styles --}}
@section('header_styles')
@stop

{{-- Page content --}}
@section('content')

    <section class="content-header">
        <h1>Role permissions for module {{ strtoupper($module->name) }}</h1>
    </section>
    <!--section ends-->
    <section class="content paddingleft_right15">
        <!--main content-->
        <div class="row" id="app">
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th class="text-center">Feature</th>
                            @foreach($roles as $role)
                                <th class="text-center">{{ $role->name }}</th>
                            @endforeach
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, index) in items">
                            <td class="text-center">@{{ item.feature.name }}</td>

                            <td class="text-center" v-for="(user, role_id) in item.users">
                                <input v-bind:name="user.name" type="checkbox"
                                       v-bind:checked="user.permission"
                                       v-on:input="saveRolePermission(index, role_id)">
                            </td>
                        <tr>
                    </tbody>
                </table>
            </div>

            <div class="text-center text-info" style="margin-bottom: 15px">@{{response}}</div>
        </div>

    </section>
    <!-- content -->
@stop

{{-- page level scripts --}}
@section('footer_scripts')

    <script>

        var route_get_permissions = "{{route("admin.developers.get-permissions", ["module_id" => $module->id])}}"
        var route_save_permission = "{{route("admin.developers.save-permissions")}}"

        new Vue({
            el: '#app',
            data: () => ({
                items: [],
                response: "",
            }),
            created() {
                this.getRolePermission();
            },
            methods: {
                getRolePermission() {
                    axios.get(route_get_permissions)
                        .then(response => {
                            this.items = response.data.output;
                        })
                        .catch(error => {
                            console.log(error)
                            this.response = error + " Try looking in the browser console for more information";
                        });
                },
                saveRolePermission(item_index, role_id) {
                    this.response = "";

                    let item = this.items[item_index];
                    axios.put(route_save_permission, { role_id, module_id: item.module.id, feature_id: item.feature.id, permission: !item.users[role_id]['permission'] })
                        .then(response => {
                            item.users[role_id]['permission'] = !item.users[role_id]['permission'];

                            this.response = response.data.output;
                        })
                        .catch(error => {
                            console.log(error)
                            this.response = error + " Try looking in the browser console for more information";
                        });
                },
            }
        });
    </script>

@stop