@extends('contentNavbarLayout')

@section('title', 'Role Management')

@section('content')
<div class="container">
  <h4 class="mb-3">Role Management</h4>
  <br>

  @hasPermission('system.accesscontrol.role.add')
  <div class="mb-3 text-end">
    <button class="btn btn-primary mb-3" data-bs-toggle="modal" data-bs-target="#addRoleModal">
      <i class="mdi mdi-plus"></i> Add New Role
    </button>
  </div>
  @endhasPermission

  {{-- Flash Message --}}
    @if(session('success'))
      <div class="alert alert-success alert-dismissible fade show m-3" role="alert">
        <i class="mdi mdi-check-circle-outline me-1"></i>
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
    @endif

    {{-- Global Error List --}}
    @if ($errors->any())
      <div class="alert alert-danger alert-dismissible fade show m-3" role="alert">
        <i class="mdi mdi-alert-circle-outline me-1"></i>
        <strong>Whoops!</strong> Please fix the following:
        <ul class="mb-0 mt-1 ps-3">
          @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
          @endforeach
        </ul>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
    @endif

  <div class="col-12">
    <div class="card">
      <div class="table-responsive">
        <table class="table">
          <thead class="table-light">
            <tr>
              <th>No.</th>
              <th>Role Name</th>
              @hasAnyPermission('system.accesscontrol.role.edit', 'system.accesscontrol.role.delete')
              <th>Actions</th>
              @endhasAnyPermission
              @hasPermission('system.accesscontrol.role.manage_permissions')
              <th>Manage</th>
              @endhasPermission
            </tr>
          </thead>
          <tbody>
            @foreach ($roles as $index => $role)
              <tr>
                <td>{{ $index + 1 }}</td>
                <td>{{ $role->name }}</td>
                
                @hasAnyPermission('system.accesscontrol.role.edit', 'system.accesscontrol.role.delete')
                 <td>
                    <div class="d-flex gap-2">
                      {{-- Edit --}}
                      @hasPermission('system.accesscontrol.role.edit')
                      <a href="{{ route('roles.edit', $role->id) }}" class="btn btn-sm btn-outline-primary" title="Edit">
                        <i class="mdi mdi-pencil-outline"></i>
                      </a>
                      @endhasPermission

                      {{-- Delete --}}
                      @hasPermission('system.accesscontrol.role.delete')
                      <form action="{{ route('roles.destroy', $role->id) }}" method="POST" onsubmit="return confirm('Are you sure?');" class="d-inline">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-sm btn-outline-danger" title="Delete">
                          <i class="mdi mdi-trash-can-outline"></i>
                        </button>
                      </form>
                      @endhasPermission
                    </div>
                  </td>
                @endhasAnyPermission

                  {{-- Manage column --}}
                  @hasPermission('system.accesscontrol.role.manage_permissions')
                  <td>
                    <a href="{{ route('roles.manage-permissions', $role->id) }}" class="btn btn-sm btn-outline-info">
                      <i class="mdi mdi-shield-key-outline"></i> Manage Permissions
                    </a>
                  </td>
                  @endhasPermission
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

{{-- Modal for Add Role --}}
@hasPermission('system.accesscontrol.role.add')
<div class="modal fade" id="addRoleModal" tabindex="-1" aria-labelledby="addRoleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <form action="{{ route('roles.store') }}" method="POST">
      @csrf
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="addRoleModalLabel">Add Role</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <label for="name" class="form-label">Role Name</label>
            <input type="text" class="form-control" id="name" name="name" required>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
            <i class="mdi mdi-close"></i> Cancel
          </button>
          <button type="submit" class="btn btn-primary">
            <i class="mdi mdi-content-save"></i> Save
          </button>
        </div>
      </div>
    </form>
  </div>
</div>
@endhasPermission
@endsection