@extends('layouts.bootstrap')

@section('title', 'Role Management')
@section('breadcrumb', 'Dashboard / User Management / Role Management')

@section('content')
<!-- Toolbar -->
<div class="card shadow-sm mb-3">
  <div class="card-body d-flex flex-wrap gap-2 align-items-center justify-content-between">
    <div class="d-flex flex-wrap gap-2 align-items-center">
      <a href="{{ route('admin.roles.create') }}" class="btn btn-primary">
        <i class="bi bi-plus-circle me-1"></i>Create Role
      </a>
      <button class="btn btn-outline-danger" onclick="bulkDelete()">
        <i class="bi bi-trash me-1"></i>Delete Selected
      </button>
    </div>
    <div class="d-flex flex-wrap gap-2 align-items-center">
      <input id="quickSearch" class="form-control" placeholder="Search roles..." style="min-width:240px">
    </div>
  </div>
</div>

<!-- Roles Table -->
<div class="card shadow-sm">
  <div class="table-responsive">
    <table class="table align-middle mb-0" id="rolesTable">
      <thead class="table-light">
        <tr>
          <th style="width:28px"><input class="form-check-input" type="checkbox" id="selectAll"></th>
          <th>Role Name</th>
          <th>Description</th>
          <th>Permissions</th>
          <th>Users</th>
          <th>Created</th>
          <th class="text-end">Actions</th>
        </tr>
      </thead>
      <tbody>
        @forelse($roles as $role)
        <tr>
          <td><input class="form-check-input role-checkbox" type="checkbox" value="{{ $role->id }}"></td>
          <td>
            <div class="fw-bold">{{ $role->name }}</div>
            <small class="text-muted">{{ $role->slug }}</small>
          </td>
          <td>{{ $role->description ?? 'No description' }}</td>
          <td>
            @if($role->permissions->count() > 0)
              <span class="badge bg-info">{{ $role->permissions->count() }} permissions</span>
            @else
              <span class="text-muted">No permissions</span>
            @endif
          </td>
          <td>
            <span class="badge bg-primary">{{ $role->users->count() }} users</span>
          </td>
          <td>{{ $role->created_at->format('M d, Y') }}</td>
          <td class="text-end">
            <div class="btn-group">
              <a href="{{ route('admin.roles.show', $role) }}" class="btn btn-sm btn-outline-secondary" title="View">
                <i class="bi bi-eye"></i>
              </a>
              <a href="{{ route('admin.roles.edit', $role) }}" class="btn btn-sm btn-outline-primary" title="Edit">
                <i class="bi bi-pencil"></i>
              </a>
              @if($role->users->count() === 0)
              <button class="btn btn-sm btn-outline-danger" 
                      onclick="deleteRole({{ $role->id }}, '{{ $role->name }}')" 
                      title="Delete">
                <i class="bi bi-trash"></i>
              </button>
              @else
              <button class="btn btn-sm btn-outline-danger" disabled title="Cannot delete role with assigned users">
                <i class="bi bi-trash"></i>
              </button>
              @endif
            </div>
          </td>
        </tr>
        @empty
        <tr>
          <td colspan="7" class="text-center py-4">
            <i class="bi bi-shield-check fs-1 text-muted mb-3"></i>
            <h5 class="text-muted">No Roles Found</h5>
            <p class="text-muted">Create your first role to get started.</p>
            <a href="{{ route('admin.roles.create') }}" class="btn btn-primary">
              <i class="bi bi-plus-circle me-1"></i>Create Role
            </a>
          </td>
        </tr>
        @endforelse
      </tbody>
    </table>
  </div>
  @if($roles->hasPages())
  <div class="card-footer bg-white d-flex align-items-center justify-content-between">
    <div class="small text-secondary">Showing {{ $roles->firstItem() }}–{{ $roles->lastItem() }} of {{ $roles->total() }}</div>
    <nav>
      {{ $roles->links() }}
    </nav>
  </div>
  @endif
</div>

<!-- Delete Form -->
<form id="deleteForm" method="POST" style="display: none;">
  @csrf
  @method('DELETE')
</form>
@endsection

@push('scripts')
<script>
// Simple client-side search
const q = document.getElementById('quickSearch');
if (q) {
  q.addEventListener('input', () => {
    const term = q.value.toLowerCase();
    document.querySelectorAll('#rolesTable tbody tr').forEach(tr => {
      tr.style.display = tr.innerText.toLowerCase().includes(term) ? '' : 'none';
    });
  });
}

// Bulk select
const selectAll = document.getElementById('selectAll');
if (selectAll) {
  selectAll.addEventListener('change', (e)=>{
    document.querySelectorAll('.role-checkbox').forEach(cb => cb.checked = e.target.checked);
  });
}

function bulkDelete() {
  const checkedBoxes = document.querySelectorAll('.role-checkbox:checked');
  if (checkedBoxes.length === 0) {
    alert('Please select roles to delete');
    return;
  }
  
  if (confirm(`Are you sure you want to delete ${checkedBoxes.length} role(s)?`)) {
    // Implement bulk delete logic
    console.log('Bulk delete:', Array.from(checkedBoxes).map(cb => cb.value));
  }
}

function deleteRole(roleId, roleName) {
  if (confirm(`Are you sure you want to delete "${roleName}"?`)) {
    const form = document.getElementById('deleteForm');
    form.action = `/admin/roles/${roleId}`;
    form.submit();
  }
}
</script>
@endpush