@extends('admin.layout-content')

@section('header')
    <style>
        .layui-table th, 
        .layui-card td {
            text-align: center;
            cursor: pointer;
        }
    </style>
@endsection

@section('content')
    <div class="layui-card">
        <div class="layui-card-header sg-card-header">
            {{ $model_name }}(点击按钮切换权限)
        </div>
        <div class="layui-card-body">
            <table class="layui-table">
                <thead>
                <tr>
                    <th></th>
                    @foreach($project_roles as $project_role)
                        <th>{{ $project_role->name }}</th>
                    @endforeach
                </tr>
                </thead>
                <tbody>
                @foreach($items as $item)
                <tr>
                    @foreach($item as $key => $i_item)
                        @if($key == 0)
                            <td>{{ $i_item->name }}</td>
                        @elseif($i_item['has'])
                            <td class="sg-change-btn" data-has="1" data-right-id="{{$i_item['right_id']}}" data-role-id="{{$i_item['role_id']}}"><span class="layui-badge layui-bg-green">有权</span></td>
                        @else
                            <td class="sg-change-btn" data-has="2" data-right-id="{{$i_item['right_id']}}" data-role-id="{{$i_item['role_id']}}"><span class="layui-badge layui-bg-gray">无权</span></td>
                        @endif
                    @endforeach
                </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>
@endsection

@section('footer')
    <script>
        $(function () {
            layui.use(['layer'], function () {
                var layer = layui.layer;
                $('.sg-change-btn').on('click', function () {
                    var has = $(this).attr('data-has');
                    var right_id = $(this).attr('data-right-id');
                    var role_id = $(this).attr('data-role-id');
                    var msg = has === '2' ? '确定授予该权利吗？' : '确定取消该权利吗？';
                    layer.confirm(msg, function(index) {
                        $.ajax({
                            method: 'POST',
                            url: '{{ $pre_uri }}' + 'change',
                            headers: {
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            data: {
                                right_id: right_id,
                                role_id: role_id,
                                has: has
                            },
                            success: function (data) {
                                if(data.status === 'success') {
                                    window.location.reload()
                                } else {
                                    layer.msg(data.info, {
                                        icon: 2
                                    });
                                }
                                layer.close(index);
                            },
                            error: function () {
                                layer.close(index);
                                layer.msg('操作失败', {
                                    icon: 2
                                });
                            }
                        });
                    });
                })
            })
        })
    </script>
@endsection