@extends('layouts.app')

@section('title', 'Roles')

@section('content')
<div class="container-fluid">
  @include('partials._flash')

  <div class="row mb-3">
    <div class="col-md-8">
      <h4 class="mb-0">Roles</h4>
    </div>
    @can('create roles')
      <div class="col-md-4 text-end">
        <a href="{{ route('roles.create') }}" class="btn btn-primary">
          <i class="bi bi-plus-lg"></i> Create Role
        </a>
      </div>
    @endcan
  </div>

  <div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
      <form class="row g-2 col-md-8" method="GET" action="{{ route('roles.index') }}">
        <div class="col-auto">
          <input type="text" name="q" value="{{ $q ?? '' }}" class="form-control" placeholder="Search name, guard, level">
        </div>

        <div class="col-auto">
          <select name="per_page" class="form-select" onchange="this.form.submit()">
            @foreach([10,15,25,50,100] as $n)
              <option value="{{ $n }}" @if($perPage == $n) selected @endif>{{ $n }} / page</option>
            @endforeach
          </select>
        </div>

        <div class="col-auto">
          <button class="btn btn-outline-secondary" type="submit"><i class="bi bi-search"></i> Search</button>
          <a href="{{ route('roles.index') }}" class="btn btn-outline-secondary">Reset</a>
        </div>
      </form>

      <div class="col-auto">
        <div class="btn-group">
          <a href="{{ route('roles.index', array_merge(request()->except('page'), ['sort' => 'name', 'direction' => ($sort == 'name' && $direction == 'asc') ? 'desc' : 'asc'])) }}"
             class="btn btn-sm btn-outline-secondary">Sort Name</a>
          <a href="{{ route('roles.index', array_merge(request()->except('page'), ['sort' => 'level', 'direction' => ($sort == 'level' && $direction == 'asc') ? 'desc' : 'asc'])) }}"
             class="btn btn-sm btn-outline-secondary">Sort Level</a>
        </div>
      </div>
    </div>

    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table table-hover mb-0">
          <thead class="table-light">
            <tr>
              <th>#</th>
              <th>Name</th>
              <th>Level</th>
              <th>Permissions</th>
              <th>Created</th>
              <th class="text-end">Actions</th>
            </tr>
          </thead>
          <tbody>
            @forelse ($roles as $role)
              <tr>
                <td>{{ $role->id }}</td>
                <td><a href="{{ route('roles.show', $role) }}">{{ $role->name }}</a></td>
                <td>{{ $role->level }}</td>
                <td>
                  @if ($role->permissions->count())
                    @php
                      $groupedPermissions = $role->permissions->groupBy(function($perm) {
                          $parts = explode(' ', $perm->name);
                          return count($parts) > 1 ? end($parts) : 'Other';
                      });
                    @endphp
                    <div class="d-flex flex-column gap-1">
                      @foreach($groupedPermissions as $entity => $perms)
                        <div>
                          <strong class="text-capitalize small" style="width: 70px; display: inline-block;">{{ $entity }}:</strong>
                          @foreach($perms as $perm)
                            <span class="badge bg-secondary fw-normal text-capitalize">{{ explode(' ', $perm->name)[0] }}</span>
                          @endforeach
                        </div>
                      @endforeach
                    </div>
                  @else
                    <span class="text-muted small">No permissions</span>
                  @endif
                </td>

                <td>{{ $role->created_at->format('Y-m-d') }}</td>
                <td class="text-end">
                  @can('edit roles')
                    <a href="{{ route('roles.edit', $role) }}" class="btn btn-sm btn-outline-primary">
                      <i class="bi bi-pencil"></i>
                    </a>
                  @endcan
                  @can('delete roles')
                    <button onclick="confirmDelete('{{ route('roles.destroy', $role) }}')" class="btn btn-sm btn-outline-danger">
                      <i class="bi bi-trash"></i>
                    </button>
                  @endcan
                </td>
              </tr>
            @empty
              <tr><td colspan="6" class="text-center">No roles found.</td></tr>
            @endforelse
          </tbody>
        </table>
      </div>

      <div class="card-footer d-flex justify-content-between align-items-center">
        <div>
          Showing {{ $roles->firstItem() ?? 0 }} to {{ $roles->lastItem() ?? 0 }} of {{ $roles->total() }} entries
        </div>
        <div>
          {{ $roles->links() }}
        </div>
      </div>
    </div>
  </div>

  @include('partials._delete_modal')
</div>
@endsection