@extends('layouts.master')

@section('page_title', 'Role Details')
@section('title', 'Role Edit')
@section('main_item', 'Role')
@section('sub_item', 'Role Edit')

@section('content')
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                Edit Role
            </div>


            <div class="card-body">
    <form method="POST" action="{{ route('roles.update', [$role->id]) }}" enctype="multipart/form-data">
        @method('PUT')
        @csrf
        <div class="row">
            <div class="col-md-4">
                <div class="form-group">
                                <label class="required" for="name">Title</label>
                                <input class="form-control {{ $errors->has('name') ? 'is-invalid' : '' }}" type="text"
                                    name="name" id="name" value="{{ old('name', $role->name) }}" required>

                </div>
            </div>
        </div>
        <br>
        <div class="col-md-12">
            <div class="form-group">
                <label class="required" for="permissions">Permissions</label>
                @if($permission->count() > 0)
                    @foreach($permissionsGroups as $group => $permissions)
    <div class="row check_group">
        <div class="col-md-3">
            <h4>{{ $group }}</h4>
        </div>
        <div class="col-md-2">
            <div class="select_all">
                <label>
                    <input type="checkbox" class="check_all permission">
                    Select All
                </label>
            </div>
        </div>
        <div class="col-md-6">
            @foreach($permissions as $permission)
                <div class="col-md-12">
                    <div class="select_all">
                        <label>
                            <input type="checkbox" value="{{ $permission->id }}" name="permissions[]"
                                   class="permission" {{ in_array($permission->id, $rolePermissions) ? 'checked' : '' }}>
                            {{ $permission->name }}
                        </label>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
    <hr>
@endforeach
                @else
                    <div class="row check_group">
                        <div class="col-md-3">
                            <p>No permissions added yet!</p>
                        </div>
                    </div>
                @endif
            </div>
        </div>
        <div class="form-group">
            <button class="btn btn-danger" type="submit">
                Update
            </button>
        </div>
    </form>
</div>
<hr>
@endsection
@section('scripts')
    <script>
        $(document).on('click', '.check_all', function() {

            $(this)
                .closest('.check_group')
                .find('.permission')
                .each(function() {
                    $(this).prop('checked', true);

                });
            $(this).removeClass('check_all').addClass('uncheck_all');
        });
        $(document).on('click', '.uncheck_all', function() {
            $(this)
                .closest('.check_group')
                .find('.permission')
                .each(function() {
                    $(this).prop('checked', false);
                });
            $(this).removeClass('uncheck_all').addClass('check_all');
        });
    </script>
@endsection