231 lines
11 KiB
PHP
231 lines
11 KiB
PHP
@extends('layouts.admin')
|
|
|
|
@section('title', 'Daftar Pengguna')
|
|
|
|
@section('content')
|
|
<!-- Style Khusus Modal Fix Backdrop Z-Index -->
|
|
<style>
|
|
.modal-backdrop {
|
|
z-index: 1040 !important;
|
|
}
|
|
.modal {
|
|
z-index: 1050 !important;
|
|
}
|
|
.modal-content-custom {
|
|
background-color: #ffffff !important;
|
|
border: none;
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
|
|
}
|
|
.modal-header-custom {
|
|
background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
|
|
}
|
|
.cursor-pointer {
|
|
cursor: pointer;
|
|
}
|
|
.pagination {
|
|
margin-bottom: 0;
|
|
}
|
|
</style>
|
|
|
|
<div class="container-fluid">
|
|
<!-- Header Halaman -->
|
|
<div class="d-flex align-items-center justify-content-between mb-4">
|
|
<div>
|
|
<h4 class="fw-bold mb-1"><i class="fas fa-users-cog text-primary me-2"></i>Daftar Pengguna Sistem</h4>
|
|
<p class="text-muted small mb-0">Kelola akun akses sistem untuk Guru Bimbingan Konseling (BK) dan pendaftaran siswa.</p>
|
|
</div>
|
|
<button type="button" class="btn btn-primary rounded-pill px-4 shadow-sm fw-semibold" data-bs-toggle="modal" data-bs-target="#modalTambahUser">
|
|
<i class="fas fa-user-plus me-2"></i>Tambah Akun Guru
|
|
</button>
|
|
</div>
|
|
|
|
@if (session('success'))
|
|
<div class="alert alert-success alert-dismissible fade show rounded-3 border-0 shadow-sm mb-4" role="alert">
|
|
<i class="fas fa-check-circle me-1"></i> {{ session('success') }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
@endif
|
|
|
|
@if (session('error'))
|
|
<div class="alert alert-danger alert-dismissible fade show rounded-3 border-0 shadow-sm mb-4" role="alert">
|
|
<i class="fas fa-exclamation-triangle me-1"></i> {{ session('error') }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Tabel Daftar User -->
|
|
<div class="card border-0 shadow-sm rounded-4">
|
|
<div class="card-body p-4">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover align-middle mb-0">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th class="ps-3">No</th>
|
|
<th>Nama Lengkap</th>
|
|
<th>Email</th>
|
|
<th>Peran Akses</th>
|
|
<th>Tanggal Terdaftar</th>
|
|
<th class="text-center">Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@forelse($users as $index => $u)
|
|
<tr>
|
|
<td class="ps-3 fw-medium text-muted">{{ $users->firstItem() + $index }}</td>
|
|
<td class="fw-bold text-dark">{{ $u->name }}</td>
|
|
<td>{{ $u->email }}</td>
|
|
<td>
|
|
@if($u->role === 'admin' || $u->role === 'guru')
|
|
<span class="badge bg-primary-subtle text-primary border border-primary-subtle px-3 py-1 rounded-pill fw-semibold">
|
|
<i class="fas fa-user-tie me-1"></i> Guru
|
|
</span>
|
|
@else
|
|
<span class="badge bg-info-subtle text-info-emphasis border border-info-subtle px-3 py-1 rounded-pill fw-medium">
|
|
<i class="fas fa-user-graduate me-1"></i> Siswa
|
|
</span>
|
|
@endif
|
|
</td>
|
|
<td>{{ \Carbon\Carbon::parse($u->created_at)->translatedFormat('d M Y') }}</td>
|
|
<td class="text-center">
|
|
@if(auth()->id() === $u->id)
|
|
<span class="badge bg-light text-primary border fw-medium px-3 py-1 rounded-pill">Akun Anda</span>
|
|
@elseif($u->role === 'siswa')
|
|
<form action="{{ route('admin.users.destroy', $u->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Apakah Anda yakin ingin menghapus akun Siswa ini?')">
|
|
@csrf
|
|
@method('DELETE')
|
|
<button type="submit" class="btn btn-sm btn-outline-danger rounded-3 px-2 py-1" title="Hapus Akun Siswa">
|
|
<i class="fas fa-trash-alt me-1"></i> Hapus
|
|
</button>
|
|
</form>
|
|
@else
|
|
<span class="badge bg-light text-secondary border fw-medium px-3 py-1 rounded-pill">
|
|
<i class="fas fa-shield-alt me-1"></i> Akun Guru
|
|
</span>
|
|
@endif
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="6" class="text-center text-muted py-4">Belum ada data pengguna terdaftar.</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- Footer Card & Pagination Rapi -->
|
|
<div class="d-flex flex-column flex-md-row justify-content-between align-items-center mt-4 pt-3 border-top gap-2">
|
|
<div class="small text-muted">
|
|
Menampilkan <strong>{{ $users->firstItem() ?? 0 }}</strong> - <strong>{{ $users->lastItem() ?? 0 }}</strong> dari <strong>{{ $users->total() }}</strong> pengguna
|
|
</div>
|
|
<div>
|
|
{{ $users->appends(request()->query())->links('pagination::bootstrap-5') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
{{-- MODAL TAMBAH AKUN GURU BK --}}
|
|
<div class="modal fade" id="modalTambahUser" tabindex="-1" aria-labelledby="modalTambahUserLabel" aria-hidden="true" data-bs-backdrop="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content modal-content-custom rounded-4 overflow-hidden">
|
|
|
|
<!-- Modal Header -->
|
|
<div class="modal-header modal-header-custom text-white p-4">
|
|
<div>
|
|
<h5 class="modal-title fw-bold mb-1 text-white" id="modalTambahUserLabel">
|
|
<i class="fas fa-user-plus me-2"></i>Tambah Akun Guru
|
|
</h5>
|
|
<p class="small text-white opacity-75 mb-0">Buatkan akun akses baru untuk pengelola Bimbingan Konseling</p>
|
|
</div>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
|
|
<form action="{{ route('admin.users.store') }}" method="POST">
|
|
@csrf
|
|
<input type="hidden" name="role" value="admin">
|
|
|
|
<div class="modal-body p-4 bg-white">
|
|
|
|
<!-- Alert Petunjuk Pengisian yang Umum & Fleksibel -->
|
|
<div class="alert alert-primary bg-primary-subtle border-0 rounded-3 p-3 mb-4">
|
|
<div class="d-flex align-items-start">
|
|
<i class="fas fa-info-circle text-primary fs-5 me-3 mt-1"></i>
|
|
<div class="small text-primary-emphasis">
|
|
<strong>Informasi Registrasi:</strong><br>
|
|
Isikan data diri Guru BK yang akan diberi hak akses. Email dan kata sandi ini akan digunakan untuk masuk ke dalam sistem.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Input Nama Lengkap -->
|
|
<div class="mb-3">
|
|
<label class="form-label fw-semibold text-dark small text-uppercase">Nama Lengkap</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text bg-white border-end-0 rounded-start-3 text-muted">
|
|
<i class="fas fa-user"></i>
|
|
</span>
|
|
<input type="text" name="name" class="form-control bg-white border-start-0 rounded-end-3 py-2" placeholder="Contoh: Siti Rahmawati (gelar opsional)" required>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Input Email -->
|
|
<div class="mb-3">
|
|
<label class="form-label fw-semibold text-dark small text-uppercase">Alamat Email</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text bg-white border-end-0 rounded-start-3 text-muted">
|
|
<i class="fas fa-envelope"></i>
|
|
</span>
|
|
<input type="email" name="email" class="form-control bg-white border-start-0 rounded-end-3 py-2" placeholder="Contoh: nama@gmail.com" required>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Input Password dengan Toggle Lihat Password -->
|
|
<div class="mb-3">
|
|
<label class="form-label fw-semibold text-dark small text-uppercase">Kata Sandi (Password)</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text bg-white border-end-0 rounded-start-3 text-muted">
|
|
<i class="fas fa-lock"></i>
|
|
</span>
|
|
<input type="password" name="password" id="passwordInput" class="form-control bg-white border-start-0 border-end-0 py-2" placeholder="Masukkan kata sandi (minimal 8 karakter)" required>
|
|
<span class="input-group-text bg-white border-start-0 rounded-end-3 text-muted cursor-pointer" id="togglePassword">
|
|
<i class="fas fa-eye" id="togglePasswordIcon"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="modal-footer bg-light border-0 p-3 px-4">
|
|
<button type="button" class="btn btn-outline-secondary rounded-pill px-4" data-bs-dismiss="modal">Batal</button>
|
|
<button type="submit" class="btn btn-primary rounded-pill px-4 fw-bold shadow-sm">
|
|
<i class="fas fa-save me-1"></i> Simpan Akun Guru
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SCRIPT UNTUK TOGGLE EYE SEE/HIDE PASSWORD -->
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const togglePassword = document.querySelector('#togglePassword');
|
|
const passwordInput = document.querySelector('#passwordInput');
|
|
const toggleIcon = document.querySelector('#togglePasswordIcon');
|
|
|
|
if (togglePassword && passwordInput && toggleIcon) {
|
|
togglePassword.addEventListener('click', function () {
|
|
// Toggle tipe atribut input
|
|
const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
|
|
passwordInput.setAttribute('type', type);
|
|
|
|
// Toggle ikon mata
|
|
toggleIcon.classList.toggle('fa-eye');
|
|
toggleIcon.classList.toggle('fa-eye-slash');
|
|
});
|
|
}
|
|
});
|
|
</script> |