@extends('layouts.user_type.auth')

@section('content')
  <div>
    <div class="row">
      <div class="col-12">
        <div class="card mb-4 mx-4">
          <div class="card-header pb-0">
            <div class="d-flex flex-row justify-content-between">
              <div>
                <h5 class="mb-0">Role Management</h5>
              </div>
              <button class="btn bg-gradient-primary btn-sm mb-0" data-bs-toggle="modal" data-bs-target="#addRoleModal"
                type="button">
                <i class="fas fa-plus"></i>&nbsp; Tambah Role
              </button>
            </div>
          </div>
          @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert" style="margin: 1rem;">
              {{ session('success') }}
              <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
          @endif
          <div class="card-body px-0 pt-0 pb-2">
            <div class="table-responsive p-0">
              <table class="table align-items-center mb-0">
                <thead>
                  <tr>
                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-4">
                      No
                    </th>
                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                      Role Name
                    </th>
                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                      Display Name
                    </th>
                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                      Description
                    </th>
                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                      Created At
                    </th>
                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-center">
                      Action
                    </th>
                  </tr>
                </thead>
                <tbody>
                  @forelse ($roles as $role)
                    <tr>
                      <td class="ps-4">{{ $loop->iteration }}</td>
                      <td>
                        <p class="text-sm font-weight-bold mb-0">{{ $role->name }}</p>
                      </td>
                      <td>
                        <p class="text-sm font-weight-bold mb-0">{{ $role->display_name }}</p>
                      </td>
                      <td>
                        <p class="text-sm mb-0">{{ $role->description ?? '-' }}</p>
                      </td>
                      <td>
                        <p class="text-sm mb-0">
                          {{ $role->created_at ? $role->created_at->format('d/m/Y H:i') : '-' }}
                        </p>
                      </td>
                      <td class="text-center">
                        <button class="btn btn-sm btn-info" data-bs-toggle="modal"
                          data-bs-target="#editRoleModal{{ $role->id }}" type="button">
                          <i class="fas fa-edit"></i> Edit
                        </button>
                        <form action="{{ route('role-management.delete', $role->id) }}" method="POST"
                          style="display: inline-block;">
                          @csrf
                          @method('DELETE')
                          <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure?')">
                            <i class="fas fa-trash"></i> Delete
                          </button>
                        </form>
                      </td>
                    </tr>

                    <!-- Edit Role Modal -->
                    <div class="modal fade" id="editRoleModal{{ $role->id }}" tabindex="-1"
                      aria-labelledby="editRoleModalLabel" aria-hidden="true">
                      <div class="modal-dialog">
                        <form action="{{ route('role-management.update', $role->id) }}" method="POST">
                          @csrf
                          <div class="modal-content">
                            <div class="modal-header">
                              <h5 class="modal-title" id="editRoleModalLabel">Edit 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 class="form-label">Role Name</label>
                                <input type="text" class="form-control" value="{{ $role->name }}" disabled>
                                <small class="text-muted">Role name cannot be changed</small>
                              </div>
                              <div class="mb-3">
                                <label class="form-label">Display Name <span class="text-danger">*</span></label>
                                <input type="text" name="display_name" class="form-control"
                                  value="{{ $role->display_name }}" required>
                                @error('display_name')
                                  <span class="text-danger small">{{ $message }}</span>
                                @enderror
                              </div>
                              <div class="mb-3">
                                <label class="form-label">Description</label>
                                <textarea name="description" class="form-control" rows="3">{{ $role->description }}</textarea>
                                @error('description')
                                  <span class="text-danger small">{{ $message }}</span>
                                @enderror
                              </div>
                            </div>
                            <div class="modal-footer">
                              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                Close
                              </button>
                              <button type="submit" class="btn btn-primary">
                                Update Role
                              </button>
                            </div>
                          </div>
                        </form>
                      </div>
                    </div>
                  @empty
                    <tr>
                      <td colspan="6" class="text-center py-4">
                        <p class="text-muted">No roles found. Create one to get started!</p>
                      </td>
                    </tr>
                  @endforelse
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Modal Tambah Role -->
  <div class="modal fade" id="addRoleModal" tabindex="-1" aria-labelledby="addRoleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <form action="{{ route('role-management.store') }}" method="POST">
        @csrf
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="addRoleModalLabel">Tambah 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 class="form-label">Role Name <span class="text-danger">*</span></label>
              <input type="text" name="name" class="form-control" placeholder="e.g. admin, manager, user"
                required>
              <small class="text-muted">Unique identifier for the role (lowercase, no spaces)</small>
              @error('name')
                <span class="text-danger small">{{ $message }}</span>
              @enderror
            </div>
            <div class="mb-3">
              <label class="form-label">Display Name <span class="text-danger">*</span></label>
              <input type="text" name="display_name" class="form-control" placeholder="e.g. Administrator"
                required>
              @error('display_name')
                <span class="text-danger small">{{ $message }}</span>
              @enderror
            </div>
            <div class="mb-3">
              <label class="form-label">Description</label>
              <textarea name="description" class="form-control" rows="3" placeholder="Role description (optional)"></textarea>
              @error('description')
                <span class="text-danger small">{{ $message }}</span>
              @enderror
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
              Close
            </button>
            <button type="submit" class="btn btn-primary">
              Create Role
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
@endsection