Add Edit //modal
 <div class="modal fade" id="modaldemo8">
     <div class="modal-dialog modal-dialog-centered text-center" role="document">
         <div class="modal-content modal-content-demo">
             <div class="modal-header">
                 <h6 class="modal-title">Add Role</h6>
                 <a href="#dismiss" aria-label="Close" class="btn-close" data-bs-dismiss="modal"></a>
                 {{-- <button type="button" aria-label="Close" class="btn-close"  data-bs-dismiss="modal"></button> --}}
             </div>
             <form action="{{ route('admin.role.store') }}" class="ajax-simple needs-validation" method="POST"
                 novalidate>
                 @csrf
                 <div class="modal-body text-start">
                     <div class="row gy-4">
                         <!-- Page Header Close -->
                         <input type="hidden" id="update_id" name="update_id" value="{{ @$id->id }}">
                         <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
                             <label class="form-label ">Name</label>
                             <input value="{{ @$id->muballig }}" id="role_name" name="name" required type="text"
                                 class="form-control" placeholder="">
                             <div id="name_error" class="float-right text-end urdu-fonts invalid-feedback">
                                 @lang('validation.custom.required_name')
                             </div>

                         </div>
                     </div>

                 </div>
                 <div class="modal-footer">
                     <div class="card-footer col-xl-4 col-lg-6 col-md-6 col-sm-12 mt-2 ">
                         <button type="button" class="simpleSubmit btn btn-primary">Submit <div
                                 class="spinner spinner-border spinner-border-sm"
                                 style="display:none; margin-right: 3px;" role="status">
                                 <span class="sr-only">Loading...</span>
                             </div></button>
                     </div>
             </form>
         </div>
     </div>
 </div>

 </div>
 {{-- modal end --}}

 {{-- modal demo 4/Edit permission  --}}
 <div class="modal fade" id="modaldemo4">
     <div class="modal-dialog modal-dialog-centered text-center" role="document">
         <div class="modal-content modal-content-demo">
             <div class="modal-header">
                 <h6 class="modal-title">Edit Permission</h6>
                 <a href="#dismiss" aria-label="Close" class="btn-close" data-bs-dismiss="modal"></a>
                 {{-- <button type="button" aria-label="Close" class="btn-close"  data-bs-dismiss="modal"></button> --}}
             </div>
             <form action="{{ route('admin.role.permission') }}" class="ajax-simple needs-validation" method="POST"
                 novalidate>
                 @csrf
                 <div class="modal-body text-start">
                     <div class="assigned_permission gy-4">
                         @if (@$id->permissions)
                             @foreach ($id->permissions as $role_permission)
                                 <span>{{ @$role_permission->name }}</span>
                             @endforeach
                         @endif
                     </div>
                     <div class="mt-3 row gy-4">
                         <!-- Page Header Close -->
                         <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
                             <h6>Role Permissons</h6>
                             <input type="hidden" name="role" id="role_id">

                             <select name="permission" class="form-control" data-trigger name="choices-single-default"
                                 id="choices-single-default">
                                 <option value="">Select Permission</option>
                                 @foreach ($permissions as $permission)
                                     <option value="{{ $permission->name }}">{{ $permission->name }}</option>
                                 @endforeach
                             </select>

                         </div>
                     </div>

                 </div>
                 <div class="modal-footer">
                     <div class="card-footer  col-xl-4 col-lg-6 col-md-6 col-sm-12 mt-2 ">
                         <button type="button" class="simpleSubmit btn btn-primary">Assign <div
                                 class="spinner spinner-border spinner-border-sm"
                                 style="display:none; margin-right: 3px;" role="status">
                                 <span class="sr-only">Loading...</span>
                             </div></button>
                     </div>
             </form>
         </div>
     </div>
 </div>
 </div>