{{--- resources/views/admin/roles/index.blade.php ---}}
@extends('layouts.admin')
@section('title', 'Manajemen Role')

@section('content')
<div class="d-flex align-items-left align-items-md-center flex-column flex-md-row pt-2 pb-4">
  <div>
    <h3 class="fw-bold mb-3">Manajemen Role</h3>
    <h6 class="op-7 mb-2">Kelola semua role pengguna yang ada di sistem.</h6>
  </div>
  <div class="ms-md-auto py-2 py-md-0">
    <a href="{{ route('admin.roles.create') }}" class="btn btn-primary btn-round" aria-label="Tambah Role Baru">
      <i class="fa fa-plus"></i> Tambah Role
    </a>
  </div>
</div>

<div class="row">
  <div class="col-md-12">
    <div class="card card-round shadow-sm border-0">
      <div class="card-header">
        <div class="card-title">
          <i class="fa fa-key me-2"></i> Daftar Role
        </div>
      </div>

      <div class="card-body">
        <div class="table-responsive">
          <table class="table table-striped table-hover align-middle" role="table">

            <thead class="table-dark text-center">
              <tr>
                <th style="width: 10%;">No</th>
                <th style="width: 40%;">Nama Role</th>
                <th style="width: 25%;">Jumlah Pengguna</th>
                <th style="width: 25%;">Aksi</th>
              </tr>
            </thead>
            <tbody>
              @forelse ($roles as $role)
                <tr class="text-center" role="row">
                  <td>{{ ($roles->currentPage()-1) * $roles->perPage() + $loop->iteration }}</td>
                  <td class="text-start fw-bold">{{ $role->name }}</td>
                  <td>
                    <span class="badge badge-primary" aria-label="{{ $role->users_count }} pengguna">{{ $role->users_count }} Pengguna</span>
                  </td>

                  <td>
                    <div class="btn-group" role="group" aria-label="Aksi role {{ $role->name }}">
                      <a href="{{ route('admin.roles.edit', $role->id) }}" 
                         class="btn btn-warning btn-sm"
                         data-bs-toggle="tooltip"
                         title="Edit Role"
                         aria-label="Edit {{ $role->name }}">
                        <i class="fa fa-edit"></i>
                      </a>

                      <form action="{{ route('admin.roles.destroy', $role->id) }}" 
                            method="POST" 
                            class="d-inline form-role-delete"
                            data-role-name="{{ $role->name }}"
                            >
                        @csrf
                        @method('DELETE')
                        <button type="submit" 
                                class="btn btn-danger btn-sm"
                                @if($role->id == 1 || $role->users_count > 0 || strtolower($role->name) === 'admin') disabled @endif
                                data-bs-toggle="tooltip"
                                title="Hapus Role"
                                aria-label="Hapus {{ $role->name }}">
                          <i class="fa fa-trash"></i>
                        </button>
                      </form>
                    </div>
                  </td>
                </tr>
              @empty
                <tr>
                  <td colspan="4" class="text-center text-muted py-4">
                    <i class="fas fa-info-circle me-1"></i> Belum ada data role.
                  </td>
                </tr>
              @endforelse 
            </tbody>
          </table>

          <div class="mt-3 d-flex justify-content-end">
            {{ $roles->links('pagination::bootstrap-5') }}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script>
  document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.form-role-delete').forEach(function(form){
      form.addEventListener('submit', function(e){
        const roleName = form.getAttribute('data-role-name') || 'item ini';
        const btn = form.querySelector('button[type="submit"]');
        if (btn && btn.disabled) {
          e.preventDefault();
          return;
        }
        const confirmMsg = `Yakin ingin menghapus role "${roleName}"? Tindakan ini tidak dapat dibatalkan.`;
        if (!confirm(confirmMsg)) {
          e.preventDefault();
        }
      });
    });
  });
</script>
@endpush