@extends('layouts.app')

@section('title', __("Manage Permissions"))

@push('css')
    @include('panel.inc.datatable.css')
    <link rel="stylesheet" href="//cdn.datatables.net/rowgroup/1.1.1/css/rowGroup.dataTables.min.css">
    <style>
        .form-check-input{
            background-color: lightgray;
        }
    </style>
@endpush

@section('content')
    <div class="page-header">
        <div class="row align-items-center">
            <div class="col-auto">
                <div class="page-pretitle">
                    {{ __('Settings') }}
                </div>
                <h2 class="page-title">
                    {{ __('Manage Permissions') }}
                </h2>
            </div>
        </div>
    </div>

    <div class="row">

        <div class="col-md-12">
            <div class="card">
                <table class="table w-100 table-striped">
                    <thead>
                    <tr>
                        <th>{{ __('Permission') }}</th>
                        <th>{{ __('Group') }}</th>
                        @foreach($roles as $role)
                            <th>{{ __($role->name) }}</th>
                        @endforeach
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($permissions as $name => $group)
                        @foreach($group as $perm => $permName)
                            <tr>
                                <td>{{ __($permName) }}</td>
                                <td>{{ __($name) }}</td>
                                @foreach($roles as $role)
                                    <td>
                                        <label class="form-check text-center">
                                            <input class="form-check-input" type="checkbox" data-role-id="{{ $role->id }}" value="{{ $perm }}" {{ $role->hasPermissionTo($perm) ? 'checked' : '' }}>
                                            <span class="form-check-label"></span>
                                        </label>
                                    </td>
                                @endforeach
                            </tr>
                        @endforeach
                    @endforeach
                    </tbody>
                </table>
            </div>

        </div>
    </div>

@endsection

@push('script')
    @include('panel.inc.datatable.js')
    <script src="//cdn.datatables.net/rowgroup/1.1.1/js/dataTables.rowGroup.min.js"></script>
    <script !src="">
        $('.table').DataTable({
            "pageLength": 50,
            rowGroup: {dataSrc: 1},
            "ordering": false,
            order: [[ 1, 'asc']],
            "columnDefs": [{
                "targets": [ 1 ],
                "visible": false
            }]
        });
        $(document).on('change', 'input[type="checkbox"]', function () {
            let el = this;
            let role = $(this).data('role-id');
            let permission = $(this).val();
            axios.post('', {role: role, permission:permission}).then(function (r) {
            }).catch(function (e) {
                notify('error', e.response.data.message);
                $(el).prop('checked', false);
            })
        })
    </script>
@endpush