116 lines
5.6 KiB
PHP
116 lines
5.6 KiB
PHP
<x-app-layout>
|
|
@section('page-title', $pageTitle)
|
|
|
|
<div class="card shadow-sm border-0">
|
|
<div class="card-header bg-white d-flex justify-content-between align-items-center">
|
|
<h5 class="my-0 fw-bold">Daftar Semua Pengguna</h5>
|
|
<a href="{{ route('admin.pengguna.create') }}" class="btn btn-primary">
|
|
<i class="bi bi-plus-circle-fill me-2"></i>Tambah Pengguna
|
|
</a>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>No</th>
|
|
<th>Nama Lengkap</th>
|
|
<th>Email</th>
|
|
<th>Role</th>
|
|
<th>Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@forelse($semuaSiswa as $siswa)
|
|
<tr>
|
|
<td>{{ $loop->iteration }}</td>
|
|
<td>{{ $siswa['nama_lengkap'] }}</td>
|
|
<td>{{ $siswa['email'] }}</td>
|
|
<td>
|
|
@if($siswa['role'] == 'penjaga perpus')
|
|
<span class="badge bg-success-subtle text-success-emphasis">{{ Str::title($siswa['role']) }}</span>
|
|
@else
|
|
<span class="badge bg-primary-subtle text-primary-emphasis">{{ Str::title($siswa['role']) }}</span>
|
|
@endif
|
|
</td>
|
|
<td>
|
|
<button class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#detailPenggunaModal"
|
|
data-id="{{ $siswa['id'] }}"
|
|
data-nama="{{ $siswa['nama_lengkap'] }}"
|
|
data-email="{{ $siswa['email'] }}"
|
|
data-role="{{ Str::title($siswa['role']) }}"
|
|
data-nisn="{{ $siswa['nisn'] ?? 'N/A' }}">
|
|
<i class="bi bi-eye-fill"></i> Detail
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="5" class="text-center">Tidak ada data pengguna.</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="detailPenggunaModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title fw-bold" id="modalNama"></h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<table class="table table-borderless table-sm">
|
|
<tr><th width="80px">Email</th><td id="modalEmail"></td></tr>
|
|
<tr><th>Role</th><td><span id="modalRole" class="badge"></span></td></tr>
|
|
<tr><th>NISN</th><td id="modalNisn"></td></tr>
|
|
</table>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
|
|
<a href="#" id="modalEditPengguna" class="btn btn-primary"><i class="bi bi-pencil-fill me-2"></i>Edit</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const detailPenggunaModal = document.getElementById('detailPenggunaModal');
|
|
if(detailPenggunaModal) {
|
|
detailPenggunaModal.addEventListener('show.bs.modal', event => {
|
|
const button = event.relatedTarget;
|
|
|
|
const id = button.getAttribute('data-id');
|
|
const nama = button.getAttribute('data-nama');
|
|
const email = button.getAttribute('data-email');
|
|
const role = button.getAttribute('data-role');
|
|
const nisn = button.getAttribute('data-nisn');
|
|
|
|
const modalNama = detailPenggunaModal.querySelector('#modalNama');
|
|
const modalEmail = detailPenggunaModal.querySelector('#modalEmail');
|
|
const modalRole = detailPenggunaModal.querySelector('#modalRole');
|
|
const modalNisn = detailPenggunaModal.querySelector('#modalNisn');
|
|
const modalEditPengguna = detailPenggunaModal.querySelector('#modalEditPengguna');
|
|
|
|
modalNama.textContent = nama;
|
|
modalEmail.textContent = `: ${email}`;
|
|
modalRole.textContent = role;
|
|
modalNisn.textContent = `: ${nisn}`;
|
|
modalEditPengguna.href = `{{ url('admin/pengguna') }}/${id}/edit`;
|
|
|
|
if (role.toLowerCase() === 'penjaga perpus') {
|
|
modalRole.className = 'badge bg-success-subtle text-success-emphasis';
|
|
} else {
|
|
modalRole.className = 'badge bg-primary-subtle text-primary-emphasis';
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
@endpush
|
|
</x-app-layout> |