{{-- Add Edit //modal --}}
 <form action="{{ route('admin.permission.store') }}" class="ajax-simple needs-validation" method="POST" novalidate>
     @csrf
     <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 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>
                 <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="permission_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>
                 </div>
             </div>
         </div>
     </div>
     </div>
 </form>
 {{-- 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.permission.assign_role') }}" class="ajax-simple needs-validation"
                 method="POST" novalidate>
                 @csrf
                 <div class="modal-body text-start">
                     <div class="mt-1 row gy-4">
                         <!-- Page Header Close -->
                         <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
                             <h6>Roles</h6>
                             <input type="hidden" name="permission" id="permission_id">

                             <select name="role" class="form-control" data-trigger name="choices-single-default"
                                 id="choices-single-default">
                                 <option selected disabled value="">Select Role</option>
                                 @foreach ($roles as $role)
                                     <option value="{{ $role->name }}">{{ $role->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>
 {{-- Add modal ended  --}}
 {{-- modal demo 4/Edit permission  --}}
 <form action="" class="ajax-simple needs-validation" method="POST" novalidate>
     @csrf
     <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 Roles</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>

                 <div class="modal-body text-start">

                     <div class="mt-2 row gy-4">
                         <!-- Page Header Close -->
                         <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
                             <h6>Roles</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 ($roles as $role)
                                     <option value="{{ $role->name }}">{{ $role->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>