@extends('layouts.main')
@section('content')
<style>
   /* ===============================
   BUTTON DESIGN SYSTEM
   ================================ */
   .btn-add{
   background:#0d6efd;
   color:#fff;
   border:none;
   border-radius:8px;
   padding:6px 14px;
   font-size:14px;
   transition:.25s;
   }
   .btn-add:hover{
   background:#0b5ed7;
   transform:translateY(-2px);
   }
   /* ACTION BUTTON BASE */
   .btn-action{
   display:inline-flex;
   align-items:center;
   justify-content:center;
   width:36px;
   height:36px;
   border-radius:8px;
   border:none;
   font-size:14px;
   transition:.25s;
   }
   /* EDIT */
   .btn-edit{
   background:#ffc107;
   color:#000;
   }
   .btn-edit:hover{
   background:#e0a800;
   }
   /* DELETE */
   .btn-delete{
   background:#dc3545;
   color:#fff;
   }
   .btn-delete:hover{
   background:#bb2d3b;
   }
   /* SAVE */
   .btn-save{
   background:#198754;
   color:#fff;
   border:none;
   border-radius:8px;
   padding:5px 12px;
   margin-top:8px;
   }
   .btn-save:hover{
   background:#157347;
   }
   .modal-footer .btn-add{
   min-width:110px;
   }
   /* ACTION BUTTON GROUP */
   .action-buttons{
   display:flex;
   justify-content:flex-end;
   gap:8px;
   }
   /* ROLE BADGE */
   .role-badge{
   background:#eef2ff;
   padding:6px 10px;
   border-radius:6px;
   font-size:13px;
   }
   .dropdown-menu{
   border-radius:8px;
   font-size:14px;
   }
</style>
<div class="container-fluid py-3">
   <div class="card shadow-sm">
      <div class="card-body">
         <!-- HEADER -->
         <div class="d-flex justify-content-between align-items-center mb-4">
            <h4 class="fw-bold mb-0">User Roles</h4>
            <button class="btn-add" data-bs-toggle="modal" data-bs-target="#addRoleModal">
            <i class="fa fa-plus me-1"></i> Add Role
            </button>
         </div>
         <!-- ROLES TABLE -->
         <div class="table-responsive">
            <div class="table-responsive">
               <table class="table table-hover table-bordered align-middle">
                  <thead class="table-light">
                     <tr>
                        <th width="80">ID</th>
                        <th width="200">Role Name</th>
                        <th>Permissions</th>
                        <th width="120" class="text-end">Actions</th>
                     </tr>
                  </thead>
                  <tbody>
                     @foreach ($roles as $role)
                     <tr>
                        <td>{{ $role->id }}</td>
                        <td>
                           <span class="role-badge">
                           {{ ucwords(str_replace('_',' ',$role->name)) }}
                           </span>
                        </td>
                        <td>
                           <form id="permForm{{ $role->id }}" 
                              action="{{ route('superadmin.role.update.permissions',$role->id) }}" 
                              method="POST">
                              @csrf
                              <div class="d-flex flex-wrap gap-2">
                                 @foreach($permissions as $perm)
                                 <label class="form-check me-2">
                                 <input
                                 class="form-check-input"
                                 type="checkbox"
                                 name="permissions[]"
                                 value="{{ $perm->name }}"
                                 @if($role->permissions->contains('name',$perm->name)) checked @endif
                                 >
                                 <span class="form-check-label">
                                 {{ ucfirst($perm->name) }}
                                 </span>
                                 </label>
                                 @endforeach
                              </div>
                           </form>
                        </td>
                        <td class="text-end">
                           <div class="dropdown">
                              <button class="btn btn-sm btn-light border dropdown-toggle"
                                 data-bs-toggle="dropdown">
                              <i class="fa fa-ellipsis-v"></i>
                              </button>
                              <ul class="dropdown-menu dropdown-menu-end shadow">
                                 <li>
                                    <button class="dropdown-item"
                                       onclick="document.getElementById('permForm{{ $role->id }}').submit();">
                                    <i class="fa fa-save text-success me-2"></i> Save Permissions
                                    </button>
                                 </li>
                                 <li>
                                    <button
                                       class="dropdown-item"
                                       data-bs-toggle="modal"
                                       data-bs-target="#editRoleModal{{ $role->id }}">
                                    <i class="fa fa-pen text-warning me-2"></i> Edit
                                    </button>
                                 </li>
                                 <li>
                                    <form action="{{ route('superadmin.roles.delete',$role->id) }}"
                                       method="POST"
                                       onsubmit="return confirm('Delete this role?')">
                                       @csrf
                                       @method('DELETE')
                                       <button class="dropdown-item text-danger">
                                       <i class="fa fa-trash me-2"></i> Delete
                                       </button>
                                    </form>
                                 </li>
                              </ul>
                           </div>
                        </td>
                     </tr>
                     @endforeach
                  </tbody>
               </table>
            </div>
         </div>
      </div>
   </div>
</div>
<!-- ADD ROLE MODAL -->
<div class="modal fade" id="addRoleModal">
   <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
         <div class="modal-header bg-primary text-white">
            <h5 class="modal-title">Add New Role</h5>
            <button class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
         </div>
         <form method="POST" action="{{ route('superadmin.roles.store') }}">
            @csrf
            <div class="modal-body">
               <label class="form-label fw-semibold">Role Name</label>
               <input type="text" name="name" class="form-control" required>
            </div>
            <div class="modal-footer d-flex justify-content-end gap-2">
               <!-- Cancel -->
               <button type="button"
                  class="btn btn-light btn-sm"
                  data-bs-dismiss="modal">
               Cancel
               </button>
               <!-- Save -->
               <button type="submit"
                  class="btn-save btn-sm">
               <i class="fa fa-save me-1"></i> Save
               </button>
               <!-- Save & Exit -->
               <button type="submit"
                  name="save_exit"
                  value="1"
                  class="btn-add btn-sm">
               <i class="fa fa-check me-1"></i> Save & Exit
               </button>
            </div>
         </form>
      </div>
   </div>
</div>
<!-- EDIT ROLE MODALS -->
@foreach($roles as $role)
<div class="modal fade" id="editRoleModal{{ $role->id }}">
   <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
         <div class="modal-header bg-warning">
            <h5 class="modal-title">Edit Role</h5>
            <button class="btn-close" data-bs-dismiss="modal"></button>
         </div>
         <form method="POST" action="{{ route('superadmin.roles.update',$role->id) }}">
            @csrf
            @method('PUT')
            <div class="modal-body">
               <label class="form-label fw-semibold">Role Name</label>
               <input
                  type="text"
                  name="name"
                  value="{{ $role->name }}"
                  class="form-control"
                  required>
            </div>
            <div class="modal-footer">
               <button
                  type="button"
                  class="btn btn-light btn-sm"
                  data-bs-dismiss="modal">
               Cancel
               </button>
               <button class="btn-add btn-sm">
               Update Role
               </button>
            </div>
         </form>
      </div>
   </div>
</div>
@endforeach
@endsection