@extends('layouts.admin')
@section('content')
<style>
   /* ===============================
   BUTTON DESIGN SYSTEM
   ================================ */
   .btn-add{
       background: #6366f1 !important;
       color: #ffffff !important;
       border: 1px solid #818cf8 !important;
       border-radius: 8px;
       padding: 6px 14px;
       font-size: 14px;
       transition: .25s;
       font-weight: 600;
       cursor: pointer;
       font-family: inherit;
   }
   .btn-add:hover{
       background: #818cf8 !important;
       transform: translateY(-2px);
       box-shadow: 0 0 12px rgba(99, 102, 241, 0.4);
   }
   /* 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 !important;
       color: #000000 !important;
   }
   .btn-edit:hover{
       background: #e0a800 !important;
   }
   /* DELETE */
   .btn-delete{
       background: #dc3545 !important;
       color: #ffffff !important;
   }
   .btn-delete:hover{
       background: #bb2d3b !important;
   }
   /* SAVE */
   .btn-save{
       background: #198754 !important;
       color: #ffffff !important;
       border: none;
       border-radius: 8px;
       padding: 5px 12px;
       margin-top: 0;
       cursor: pointer;
       font-family: inherit;
       transition: .25s;
   }
   .btn-save:hover{
       background: #157347 !important;
       transform: translateY(-1px);
   }
   .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: rgba(99, 102, 241, 0.12) !important;
       padding: 6px 12px;
       border-radius: 8px;
       font-size: 13px;
       color: #818cf8 !important;
       border: 1px solid rgba(99, 102, 241, 0.2) !important;
       font-weight: 600;
   }
   /* DROPDOWN */
   .dropdown-menu{
       border-radius: 12px;
       font-size: 14px;
       background: #0b0f19 !important;
       border: 1px solid rgba(255,255,255,0.1) !important;
       padding: 8px;
   }
   .dropdown-item{
       color: #ffffff !important;
       border-radius: 8px;
       padding: 10px 14px;
       transition: 0.2s ease;
   }
   .dropdown-item:hover{
       background: rgba(255,255,255,0.05) !important;
       color: #ffffff !important;
   }
   /* TABLE */
   .roles-table {
       border-collapse: separate !important;
       border-spacing: 0 12px !important;
       background: #0b0f19 !important;
       border: none !important;
   }
   .roles-table thead th {
       border: none !important;
       background: #0b0f19 !important;
       color: #ffffff !important;
       font-size: 13px;
       font-weight: 700;
       padding: 14px 16px;
       text-transform: uppercase;
       white-space: nowrap;
       border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
   }
   .roles-table tbody tr {
       background: transparent !important;
       transition: 0.3s ease;
   }
   .roles-table tbody td {
       padding: 16px;
       vertical-align: middle;
       background-color: #0b0f19 !important;
       border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
       border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
       border-left: none !important;
       border-right: none !important;
       color: #ffffff !important;
   }
   .roles-table tbody td:first-child {
       border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
       border-top-left-radius: 14px !important;
       border-bottom-left-radius: 14px !important;
   }
   .roles-table tbody td:last-child {
       border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
       border-top-right-radius: 14px !important;
       border-bottom-right-radius: 14px !important;
   }
   .roles-table tbody tr:hover td {
       background-color: rgba(255, 255, 255, 0.02) !important;
       border-top-color: rgba(99, 102, 241, 0.4) !important;
       border-bottom-color: rgba(99, 102, 241, 0.4) !important;
   }
   .roles-table tbody tr:hover td:first-child {
       border-left-color: rgba(99, 102, 241, 0.4) !important;
   }
   .roles-table tbody tr:hover td:last-child {
       border-right-color: rgba(99, 102, 241, 0.4) !important;
   }
   /* CHECKBOX */
   .form-check-input {
       background-color: rgba(255,255,255,0.08) !important;
       border: 1px solid rgba(255,255,255,0.2) !important;
       cursor: pointer;
   }
   .form-check-input:checked {
       background-color: #6366f1 !important;
       border-color: #818cf8 !important;
   }
   .form-check-label {
       color: #ffffff !important;
       font-size: 0.85rem;
       cursor: pointer;
   }
   /* MODAL */
   .modern-modal {
       border-radius: 24px;
       overflow: hidden;
       box-shadow: 0 18px 50px rgba(0,0,0,0.6);
       background: #0b0f19 !important;
       border: 1px solid rgba(255, 255, 255, 0.1) !important;
   }
   .modern-modal .modal-header {
       background: rgba(255, 255, 255, 0.01) !important;
       border-bottom: 1px solid rgba(255,255,255,0.1) !important;
       padding: 1.5rem 2rem;
   }
   .modern-modal .modal-body {
       background: #0b0f19 !important;
       padding: 1.5rem 2rem;
   }
   .modern-modal .modal-footer {
       background: #0b0f19 !important;
       border-top: none !important;
       padding: 1rem 2rem 1.5rem;
   }
   .modern-modal .form-label {
       color: #ffffff !important;
       font-weight: 600;
   }
   .modern-modal .form-control {
       background: rgba(0,0,0,0.25) !important;
       border: 1px solid rgba(255,255,255,0.1) !important;
       color: #ffffff !important;
       border-radius: 10px;
       padding: 0.75rem 1rem;
   }
   .modern-modal .form-control:focus {
       border-color: #6366f1 !important;
       box-shadow: none !important;
   }
   .modern-modal .form-control::placeholder {
       color: rgba(255,255,255,0.4) !important;
   }
   /* ACTION DROPDOWN BUTTON */
   .btn-action-dropdown {
       width: 40px;
       height: 40px;
       border: 1px solid rgba(255, 255, 255, 0.1) !important;
       border-radius: 10px;
       background: #0b0f19 !important;
       color: #ffffff !important;
       transition: 0.3s ease;
       cursor: pointer;
       display: inline-flex;
       align-items: center;
       justify-content: center;
   }
   .btn-action-dropdown:hover {
       background: #6366f1 !important;
       border-color: #818cf8 !important;
       transform: scale(1.05);
   }
   /* CANCEL BTN */
   .btn-cancel {
       border: none !important;
       background: rgba(255, 255, 255, 0.05) !important;
       color: #ffffff !important;
       padding: 10px 18px;
       border-radius: 10px;
       font-weight: 600;
       transition: 0.3s ease;
       cursor: pointer;
       font-family: inherit;
   }
   .btn-cancel:hover {
       background: rgba(255, 255, 255, 0.1) !important;
   }
</style>

<div class="container-fluid py-4" style="background: #0b0f19 !important;">
   <div class="card shadow-sm border-0" style="background: #0b0f19 !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 20px;">
      <div class="card-body p-0">
         <!-- HEADER -->
         <div class="d-flex justify-content-between align-items-center" style="padding: 1.5rem 2rem; border-bottom: 1px solid rgba(255,255,255,0.08);">
            <div>
                <h5 class="fw-bold mb-0 text-white" style="font-size: 1.25rem;">User Roles</h5>
                <p class="text-white mb-0" style="font-size: 0.85rem; opacity: 0.6; margin-top: 4px;">Manage roles and assign individual permissions to each role.</p>
            </div>
            <button class="btn-add" data-bs-toggle="modal" data-bs-target="#addRoleModal">
               <i class="bi bi-plus-lg me-1"></i> Add Role
            </button>
         </div>

         <!-- ROLES TABLE -->
         <div class="table-responsive" style="padding: 1rem 1.5rem 1.5rem;">
            <table class="table roles-table align-middle mb-0">
               <thead>
                  <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>
                  @forelse ($roles as $role)
                  <tr>
                     <td>
                        <span style="font-weight: 700; color: rgba(255,255,255,0.5) !important;">#{{ $role->id }}</span>
                     </td>
                     <td>
                        <span class="role-badge">
                           {{ ucwords(str_replace('_',' ',$role->display_name)) }}
                        </span>
                     </td>
                     <td>
                        <form id="permForm{{ $role->id }}"
                           action="{{ route('superadmin.role.update.permissions', ['id' => $role->id, 'simulate_host' => $tenant?->custom_domain ?? '']) }}"
                           method="POST">
                           @csrf
                           <input type="hidden" name="simulate_host" value="{{ $tenant?->custom_domain ?? '' }}">
                           <div class="d-flex flex-wrap gap-2">
                              @foreach($permissions as $perm)
                              <label class="form-check me-2" style="margin-bottom: 0;">
                                 <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">
                                    {{ $perm->display_name }}
                                 </span>
                              </label>
                              @endforeach
                           </div>
                        </form>
                     </td>
                     <td class="text-end">
                        <div class="dropdown">
                           <button class="btn-action-dropdown"
                              data-bs-toggle="dropdown">
                              <i class="bi bi-three-dots-vertical"></i>
                           </button>
                           <ul class="dropdown-menu dropdown-menu-end shadow border-0">
                              <li>
                                 <button class="dropdown-item"
                                    onclick="document.getElementById('permForm{{ $role->id }}').submit();">
                                    <i class="bi bi-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="bi bi-pencil-square text-warning me-2"></i> Edit
                                 </button>
                              </li>
                              <li>
                                 <form action="{{ route('superadmin.roles.delete', ['id' => $role->id, 'simulate_host' => $tenant?->custom_domain ?? '']) }}"
                                    method="POST"
                                    onsubmit="return confirm('Delete this role?')">
                                    @csrf
                                    @method('DELETE')
                                    <input type="hidden" name="simulate_host" value="{{ $tenant?->custom_domain ?? '' }}">
                                    <button class="dropdown-item text-danger" type="submit">
                                       <i class="bi bi-trash me-2"></i> Delete
                                    </button>
                                 </form>
                              </li>
                           </ul>
                        </div>
                     </td>
                  </tr>
                  @empty
                  <tr>
                     <td colspan="4" class="text-center" style="padding: 3rem;">
                        <div style="opacity: 0.5;">
                           <i class="bi bi-people" style="font-size: 3rem; display: block; margin-bottom: 1rem; color: #ffffff;"></i>
                           <h6 class="text-white fw-bold">No Roles Found</h6>
                           <p class="text-white mb-0" style="font-size: 0.85rem; opacity: 0.7;">Click "Add Role" to create a new role.</p>
                        </div>
                     </td>
                  </tr>
                  @endforelse
               </tbody>
            </table>
         </div>
      </div>
   </div>
</div>

<!-- ADD ROLE MODAL -->
<div class="modal fade" id="addRoleModal">
   <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content modern-modal border-0">
         <div class="modal-header">
            <div>
                <h5 class="modal-title text-white fw-bold mb-0">Add New Role</h5>
                <small style="color: rgba(255,255,255,0.5);">Create a new user role for permission mapping</small>
            </div>
            <button class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
         </div>
         <form method="POST" action="{{ route('superadmin.roles.store', ['simulate_host' => $tenant?->custom_domain ?? '']) }}">
            @csrf
            <input type="hidden" name="simulate_host" value="{{ $tenant?->custom_domain ?? '' }}">
            <div class="modal-body">
               <label class="form-label fw-semibold">Role Name</label>
               <input type="text" name="name" class="form-control" placeholder="e.g. support-agent" required>
               <!-- <small style="color: rgba(255,255,255,0.4); display: block; margin-top: 6px;">Will be auto-formatted as a slug (e.g. "Support Agent" → "support-agent")</small> -->
            </div>
            <div class="modal-footer d-flex justify-content-end gap-2">
               <button type="button" class="btn-cancel" data-bs-dismiss="modal">Cancel</button>
               <button type="submit" class="btn-save" style="padding: 10px 18px; border-radius: 10px; font-weight: 600;">
                  <i class="bi bi-save me-1"></i> Save
               </button>
               <button type="submit" name="save_exit" value="1" class="btn-add" style="padding: 10px 18px; border-radius: 10px; font-weight: 600;">
                  <i class="bi bi-check-lg 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 modern-modal border-0">
         <div class="modal-header">
            <div>
                <h5 class="modal-title text-white fw-bold mb-0">Edit Role</h5>
                <small style="color: rgba(255,255,255,0.5);">Update role name for "{{ $role->display_name }}"</small>
            </div>
            <button class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
         </div>
         <form method="POST" action="{{ route('superadmin.roles.update', ['id' => $role->id, 'simulate_host' => $tenant?->custom_domain ?? '']) }}">
            @csrf
            @method('PUT')
            <input type="hidden" name="simulate_host" value="{{ $tenant?->custom_domain ?? '' }}">
            <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 d-flex justify-content-end gap-2">
               <button type="button" class="btn-cancel" data-bs-dismiss="modal">Cancel</button>
               <button type="submit" class="btn-add" style="padding: 10px 18px; border-radius: 10px; font-weight: 600;">
                  <i class="bi bi-save2 me-1"></i> Update Role
               </button>
            </div>
         </form>
      </div>
   </div>
</div>
@endforeach
@endsection