@section('optional_css')
    <!-- icheck bootstrap -->
    <link rel="stylesheet" href="{{ asset('plugins/icheck-bootstrap/icheck-bootstrap.min.css') }}">
@endsection

@section('optional_js')
    <!-- Select2 -->
    <script src="{{ asset('plugins/select2/js/select2.full.min.js') }}"></script>
    <!-- DataTables  & Plugins -->
    <script src="{{ asset('plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>

    <!-- Date Picker -->
    <script src="{{ asset('plugins/moment/moment.min.js') }}"></script>
    <script src="{{ asset('plugins/daterangepicker/daterangepicker.js') }}"></script>

    <script>
        $(document).ready(function () {
            $('.checkall').click(function() {
                if ($(this).is(':checked')) {
                    $("input:checkbox").attr('checked', true)
                }
            });
        })
    </script>
@endsection

<x-app-layout>
    <x-slot name="header">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0">{{ __('Role') }}</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
            </div><!-- /.col -->
        </div><!-- /.row -->
    </x-slot>
    @if(session('success'))
        <x-alert-success>
            {{ session('success') }}
        </x-alert-success>
    @endif
    <form class="form-horizontal" action="{{ route('admin.role.update_permission', $role->id) }}" method="POST">
        <x-card class="col-sm-6">
            <x-slot name="title">{{ __('Permission') }} {{ __('Roles') }} {{ $role->name }}</x-slot>
            @csrf
            @method('PUT')
            <div class="col-12 table-responsive">
                <table class="table table-bordered table-sm">
                    <thead>
                        <tr>
                            <th><input type="checkbox" class="checkall"> {{ __('Select All') }}</th>
                            <th>{{ __('Permission') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($permissions as $permission)
                            <tr>
                                <td>
                                    <div class="icheck-primary">
                                        <input type="checkbox" name="permissions[]" {{ (in_array($permission->id, $role->permissions->pluck('id')->toArray()))?'checked':'' }} value="{{ $permission->name }}" id="permission-{{ str_replace(' ', '', $permission->name) }}">
                                        <label for="permission-{{ str_replace(' ', '', $permission->name) }}"></label>
                                    </div>
                                </td>
                                <td>{{ $permission->name }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="3">{{ __('Empty') }}</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <x-slot name="footer">
                <x-button>{{ __('Save') }}</x-button>
            </x-slot>
        </x-card>
    </form>
</x-app-layout>