238 lines
12 KiB
PHP
238 lines
12 KiB
PHP
{{-- resources/views/admin/users.blade.php --}}
|
|
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Manajemen Pengguna</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
|
|
<style>
|
|
body { font-family: 'Inter', sans-serif; background-color: #f1f5f9; }
|
|
</style>
|
|
</head>
|
|
<body class="flex h-screen overflow-hidden">
|
|
|
|
<!-- Sidebar -->
|
|
<aside id="sidebar" class="fixed top-0 left-0 z-30 w-64 h-full bg-white shadow-md overflow-y-auto hidden md:block">
|
|
<div class="p-5 border-b">
|
|
<h2 class="text-2xl font-bold text-blue-600">
|
|
<a href="/admin/dashboard" class="hover:underline">Admin Panel</a>
|
|
</h2>
|
|
</div>
|
|
<nav class="p-4 space-y-3">
|
|
<a href="/admin/bookings" class="flex items-center gap-3 px-4 py-2 rounded hover:bg-blue-100 transition-all">
|
|
<i class="bi bi-calendar3 text-blue-500"></i> Booking
|
|
</a>
|
|
<a href="/admin/users" class="flex items-center gap-3 px-4 py-2 rounded bg-blue-100 text-blue-700 font-semibold">
|
|
<i class="bi bi-people-fill text-blue-500"></i> Pengguna
|
|
</a>
|
|
<a href="/admin/upload" class="flex items-center gap-3 px-4 py-2 rounded hover:bg-blue-100 transition-all">
|
|
<i class="bi bi-upload text-blue-500"></i> Token Foto
|
|
</a>
|
|
<a href="/admin/reports" class="flex items-center gap-3 px-4 py-2 rounded hover:bg-blue-100 transition-all">
|
|
<i class="bi bi-boxes text-blue-500"></i> Produk
|
|
</a>
|
|
<form action="/logout" method="POST" class="px-4 mt-4">
|
|
@csrf
|
|
<button type="submit" class="w-full flex items-center justify-center gap-2 bg-red-500 text-white py-2 rounded hover:bg-red-600 transition">
|
|
<i class="bi bi-box-arrow-right"></i> Logout
|
|
</button>
|
|
</form>
|
|
</nav>
|
|
</aside>
|
|
|
|
<!-- Mobile Topbar -->
|
|
<header class="md:hidden fixed top-0 left-0 w-full flex items-center justify-between bg-white shadow px-4 py-3 z-20">
|
|
<button onclick="toggleSidebar()" class="text-2xl text-blue-600">
|
|
<i class="bi bi-list"></i>
|
|
</button>
|
|
<h1 class="text-xl font-bold text-blue-600">Admin Panel</h1>
|
|
</header>
|
|
|
|
<!-- Mobile Overlay -->
|
|
<div id="overlay" class="fixed inset-0 bg-black bg-opacity-40 hidden z-20" onclick="toggleSidebar()"></div>
|
|
|
|
<!-- Main Content -->
|
|
<main class="flex-1 md:ml-64 mt-16 md:mt-0 p-6 overflow-y-auto w-full">
|
|
<div class="max-w-6xl mx-auto">
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-6">Manajemen Pengguna</h2>
|
|
|
|
@if(session('success'))
|
|
<div class="bg-green-100 text-green-800 border border-green-300 px-4 py-3 rounded mb-4">
|
|
{{ session('success') }}
|
|
</div>
|
|
@endif
|
|
|
|
@if ($errors->any())
|
|
<div class="bg-red-100 text-red-800 border border-red-300 px-4 py-3 rounded mb-4">
|
|
<ul class="list-disc pl-5">
|
|
@foreach ($errors->all() as $error)
|
|
<li>{{ $error }}</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Toolbar -->
|
|
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">
|
|
<button onclick="openModal()" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center w-fit">
|
|
<i class="bi bi-person-plus mr-2"></i> Tambah Karyawan
|
|
</button>
|
|
<form method="GET" action="{{ route('admin.users') }}" class="flex items-center gap-2">
|
|
<input type="text" name="search" value="{{ request('search') }}" placeholder="Cari nama/email..."
|
|
class="border border-gray-300 p-2 rounded-lg w-full md:w-64 focus:ring-2 focus:ring-blue-400">
|
|
<button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">
|
|
<i class="bi bi-search mr-1"></i> Cari
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Table -->
|
|
<div class="bg-white shadow rounded-lg overflow-x-auto">
|
|
<table class="min-w-full text-sm text-left">
|
|
<thead class="bg-blue-500 text-white">
|
|
<tr>
|
|
<th class="px-4 py-3">No</th>
|
|
<th class="px-4 py-3">Nama</th>
|
|
<th class="px-4 py-3">Email</th>
|
|
<th class="px-4 py-3">Telepon</th>
|
|
<th class="px-4 py-3">Alamat</th>
|
|
<th class="px-4 py-3">Role</th>
|
|
<th class="px-4 py-3 text-center">Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="text-gray-700">
|
|
@foreach ($users as $user)
|
|
<tr class="border-b hover:bg-gray-100">
|
|
<td class="px-4 py-3">{{ $loop->iteration }}</td>
|
|
<td class="px-4 py-3">{{ $user->name }}</td>
|
|
<td class="px-4 py-3">{{ $user->email }}</td>
|
|
<td class="px-4 py-3">{{ $user->phone }}</td>
|
|
<td class="px-4 py-3">{{ $user->address }}</td>
|
|
<td class="px-4 py-3 capitalize">{{ $user->role == 'customer' ? 'Customer' : 'Karyawan' }}</td>
|
|
<td class="px-4 py-3 text-center space-x-2">
|
|
<button onclick="openEditModal({{ $user->id }})" class="bg-yellow-400 hover:bg-yellow-500 text-white px-3 py-1 rounded">
|
|
<i class="bi bi-pencil"></i>
|
|
</button>
|
|
<form action="{{ route('admin.users.delete', $user->id) }}" method="POST" class="inline">
|
|
@csrf
|
|
@method('DELETE')
|
|
<button onclick="return confirm('Yakin ingin menghapus pengguna ini?')" class="bg-red-500 hover:bg-red-600 text-white px-3 py-1 rounded">
|
|
<i class="bi bi-trash"></i>
|
|
</button>
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Modal Tambah -->
|
|
<div id="userModal" class="hidden fixed inset-0 bg-black bg-opacity-40 z-50 flex items-center justify-center">
|
|
<div class="bg-white p-6 rounded-lg w-full max-w-md shadow-lg space-y-4 max-h-[90vh] overflow-y-auto">
|
|
<div class="flex justify-between items-center">
|
|
<h3 class="text-xl font-bold">Tambah Karyawan</h3>
|
|
<button onclick="closeModal()" class="text-2xl font-bold text-gray-500 hover:text-gray-700">×</button>
|
|
</div>
|
|
<form action="{{ route('admin.users.store') }}" method="POST" class="space-y-3">
|
|
@csrf
|
|
<input type="text" name="name" required placeholder="Nama" class="w-full border p-2 rounded-lg">
|
|
<input type="email" name="email" required placeholder="Email" class="w-full border p-2 rounded-lg">
|
|
<input type="password" name="password" required placeholder="Password" class="w-full border p-2 rounded-lg">
|
|
<input type="text" name="phone" required placeholder="Telepon" class="w-full border p-2 rounded-lg">
|
|
<input type="text" name="address" required placeholder="Alamat" class="w-full border p-2 rounded-lg">
|
|
<select name="role" required class="w-full border p-2 rounded-lg">
|
|
<option value="user">Karyawan</option>
|
|
<option value="customer">Customer</option>
|
|
</select>
|
|
<button type="submit" class="w-full bg-green-500 text-white py-2 rounded-lg hover:bg-green-600">
|
|
<i class="bi bi-check-circle mr-1"></i> Simpan
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal Edit -->
|
|
<div id="editModal" class="hidden fixed inset-0 bg-black bg-opacity-40 z-50 flex items-center justify-center">
|
|
<div class="bg-white p-6 rounded-lg w-full max-w-md shadow-lg space-y-4 max-h-[90vh] overflow-y-auto">
|
|
<div class="flex justify-between items-center">
|
|
<h3 class="text-xl font-bold">Edit Pengguna</h3>
|
|
<button onclick="closeEditModal()" class="text-2xl font-bold text-gray-500 hover:text-gray-700">×</button>
|
|
</div>
|
|
<form id="editForm" method="POST" action="#" class="space-y-3">
|
|
@csrf @method('PUT')
|
|
<input type="text" name="name" id="editName"placeholder="Nama" required class="w-full border p-2 rounded-lg">
|
|
<input type="Email" name="email" id="editEmail" placeholder="email" required class="w-full border p-2 rounded-lg">
|
|
<input type="password" name="password" id="editPassword" placeholder=" Password Kosongkan jika tidak diubah" class="w-full border p-2 rounded-lg">
|
|
<input type="text" name="phone" id="editPhone" placeholder="Nomor telepon" required class="w-full border p-2 rounded-lg">
|
|
<input type="text" name="address" id="editAddress" placeholder="Alamat" required class="w-full border p-2 rounded-lg">
|
|
<select name="role" id="editRole" required class="w-full border p-2 rounded-lg">
|
|
<option value="user">Karyawan</option>
|
|
<option value="customer">Customer</option>
|
|
</select>
|
|
<button type="submit" class="w-full bg-green-500 text-white py-2 rounded-lg hover:bg-green-600">
|
|
<i class="bi bi-check-circle mr-1"></i> Simpan Perubahan
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function toggleSidebar() {
|
|
document.getElementById('sidebar').classList.toggle('hidden');
|
|
document.getElementById('overlay').classList.toggle('hidden');
|
|
}
|
|
|
|
function openModal() {
|
|
document.getElementById("userModal").classList.remove("hidden");
|
|
}
|
|
|
|
function closeModal() {
|
|
document.getElementById("userModal").classList.add("hidden");
|
|
}
|
|
|
|
function openEditModal(userId) {
|
|
fetch(`/admin/users/${userId}/edit`)
|
|
.then(response => response.json())
|
|
.then(user => {
|
|
document.getElementById("editName").value = user.name;
|
|
document.getElementById("editEmail").value = user.email;
|
|
document.getElementById("editPhone").value = user.phone;
|
|
document.getElementById("editAddress").value = user.address;
|
|
document.getElementById("editRole").value = user.role;
|
|
document.getElementById("editPassword").value = '';
|
|
document.getElementById("editForm").action = `/admin/users/${userId}`;
|
|
document.getElementById("editModal").classList.remove("hidden");
|
|
});
|
|
}
|
|
|
|
function closeEditModal() {
|
|
document.getElementById("editModal").classList.add("hidden");
|
|
}
|
|
</script>
|
|
<script>
|
|
// Validasi input hanya angka untuk kolom telepon di modal edit
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const phoneInput = document.getElementById('editPhone');
|
|
|
|
phoneInput.addEventListener('input', function (e) {
|
|
const originalValue = e.target.value;
|
|
const numericValue = originalValue.replace(/\D/g, '');
|
|
|
|
if (originalValue !== numericValue) {
|
|
alert('Hanya angka yang diperbolehkan untuk nomor telepon.');
|
|
e.target.value = numericValue;
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html>
|