175 lines
8.4 KiB
PHP
175 lines
8.4 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'Data Pengguna - INUFA')
|
|
|
|
@section('header')
|
|
<div class="relative inline-block text-left mb-2 bg-white p-2 rounded-lg shadow">
|
|
<button type="button" class="inline-flex items-center rounded-md px-2 py-1 bg-transparent text-base font-semibold text-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-blue-400" id="data-pengguna-dropdown-button" aria-expanded="true" aria-haspopup="true">
|
|
Data Pengguna
|
|
<svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
|
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
|
</svg>
|
|
</button>
|
|
|
|
<div class="origin-top-left absolute left-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none hidden" role="menu" aria-orientation="vertical" aria-labelledby="data-pengguna-dropdown-button" tabindex="-1" id="data-pengguna-dropdown-menu">
|
|
<div class="py-1" role="none">
|
|
<a href="{{ route('pengguna') }}" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 {{ $activeTab === 'admin' ? 'bg-gray-100' : '' }}" role="menuitem" tabindex="-1" id="menu-item-admin">Admin</a>
|
|
<a href="{{ route('users') }}" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 {{ $activeTab === 'user' ? 'bg-gray-100' : '' }}" role="menuitem" tabindex="-1" id="menu-item-user">User</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@section('content')
|
|
<!-- Add Button - Only visible for admin -->
|
|
<div id="adminContent" class="{{ $activeTab === 'admin' ? '' : 'hidden' }}">
|
|
@if(auth()->user()->tipe_pengguna === 'admin')
|
|
<div class="mb-6">
|
|
<a href="{{ route('pengguna.create') }}" class="inline-block bg-white text-gray-800 px-4 py-2 rounded font-semibold">
|
|
Tambah Admin
|
|
</a>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Table Admin -->
|
|
<div class="bg-white rounded shadow overflow-x-auto">
|
|
<table class="w-full table-fixed">
|
|
<thead>
|
|
<tr class="bg-gray-100">
|
|
<th class="py-3 px-4 text-left w-12 border-r">No</th>
|
|
<th class="py-3 px-4 text-left w-36 border-r">Nama</th>
|
|
<th class="py-3 px-4 text-left w-36 border-r">Username</th>
|
|
<th class="py-3 px-4 text-left w-48 border-r">Email</th>
|
|
<th class="py-3 px-4 text-left w-36 border-r">No.Telp</th>
|
|
<th class="py-3 px-4 text-left border-r">Alamat</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@forelse($pengguna as $index => $user)
|
|
<tr class="border-t">
|
|
<td class="py-3 px-4 border-r">{{ $index + 1 }}</td>
|
|
<td class="py-3 px-4 border-r">{{ $user->nama }}</td>
|
|
<td class="py-3 px-4 border-r">{{ $user->username }}</td>
|
|
<td class="py-3 px-4 border-r">{{ $user->email }}</td>
|
|
<td class="py-3 px-4 border-r">{{ $user->no_telp }}</td>
|
|
<td class="py-3 px-4 border-r">{{ $user->alamat }}</td>
|
|
</tr>
|
|
@empty
|
|
<tr class="border-t">
|
|
<td colspan="6" class="py-3 px-4 text-center">Tidak ada data admin</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Table User Content -->
|
|
<div id="userContent" class="{{ $activeTab === 'user' ? '' : 'hidden' }}">
|
|
<div class="bg-white rounded shadow overflow-x-auto">
|
|
<table class="w-full table-fixed">
|
|
<thead>
|
|
<tr class="bg-gray-100">
|
|
<th class="py-3 px-4 text-left w-12 border-r">No</th>
|
|
<th class="py-3 px-4 text-left w-36 border-r">Nama</th>
|
|
<th class="py-3 px-4 text-left w-36 border-r">Username</th>
|
|
<th class="py-3 px-4 text-left w-48 border-r">Email</th>
|
|
<th class="py-3 px-4 text-left w-36 border-r">No.Telp</th>
|
|
<th class="py-3 px-4 text-left border-r">Alamat</th>
|
|
@if(auth()->user()->tipe_pengguna === 'admin')
|
|
<th class="py-3 px-4 text-center w-24">Aksi</th>
|
|
@endif
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@forelse($users as $index => $user)
|
|
<tr class="border-t">
|
|
<td class="py-3 px-4 border-r">{{ $index + 1 }}</td>
|
|
<td class="py-3 px-4 border-r">{{ $user->nama }}</td>
|
|
<td class="py-3 px-4 border-r">{{ $user->username }}</td>
|
|
<td class="py-3 px-4 border-r">{{ $user->email }}</td>
|
|
<td class="py-3 px-4 border-r">{{ $user->no_telp }}</td>
|
|
<td class="py-3 px-4 border-r">{{ $user->alamat }}</td>
|
|
@if(auth()->user()->tipe_pengguna === 'admin')
|
|
<td class="py-3 px-4 text-center">
|
|
<form action="{{ route('users.destroy', $user->id) }}" method="POST" class="inline">
|
|
@csrf
|
|
@method('DELETE')
|
|
<button type="submit" class="bg-red-500 text-white px-4 py-1 rounded-sm font-medium text-sm">
|
|
Hapus
|
|
</button>
|
|
</form>
|
|
</td>
|
|
@endif
|
|
</tr>
|
|
@empty
|
|
<tr class="border-t">
|
|
<td colspan="{{ auth()->user()->tipe_pengguna === 'admin' ? 7 : 6 }}" class="py-3 px-4 text-center">Tidak ada data pengguna</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
function showTab(tab) {
|
|
// Update tab styling
|
|
if (tab === 'admin') {
|
|
document.getElementById('adminContent').style.display = 'block';
|
|
document.getElementById('userContent').style.display = 'none';
|
|
} else {
|
|
document.getElementById('adminContent').style.display = 'none';
|
|
document.getElementById('userContent').style.display = 'block';
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const dropdownButton = document.getElementById('data-pengguna-dropdown-button');
|
|
const dropdownMenu = document.getElementById('data-pengguna-dropdown-menu');
|
|
|
|
if (dropdownButton && dropdownMenu) {
|
|
dropdownButton.addEventListener('click', function() {
|
|
dropdownMenu.classList.toggle('hidden');
|
|
});
|
|
|
|
document.addEventListener('click', function(event) {
|
|
if (!dropdownButton.contains(event.target) && !dropdownMenu.contains(event.target)) {
|
|
dropdownMenu.classList.add('hidden');
|
|
}
|
|
});
|
|
|
|
// Set initial tab visibility based on $activeTab, this replaces the previous showTab logic
|
|
const initialActiveTab = '{{ $activeTab }}';
|
|
if (initialActiveTab === 'user') {
|
|
document.getElementById('adminContent').classList.add('hidden');
|
|
document.getElementById('userContent').classList.remove('hidden');
|
|
} else {
|
|
document.getElementById('adminContent').classList.remove('hidden');
|
|
document.getElementById('userContent').classList.add('hidden');
|
|
}
|
|
|
|
// Handle click on dropdown menu items to switch tabs and hide menu
|
|
document.getElementById('menu-item-admin').addEventListener('click', function(event) {
|
|
event.preventDefault();
|
|
window.location.href = this.href; // Redirect to the admin route
|
|
dropdownMenu.classList.add('hidden');
|
|
});
|
|
|
|
document.getElementById('menu-item-user').addEventListener('click', function(event) {
|
|
event.preventDefault();
|
|
window.location.href = this.href; // Redirect to the user route
|
|
dropdownMenu.classList.add('hidden');
|
|
});
|
|
}
|
|
});
|
|
|
|
// The showTab function is no longer needed in its original form if we rely on full page reload for tab switching.
|
|
// However, if there was client-side only tab switching logic that needed to be preserved, it would be different.
|
|
// For now, I'm assuming full page reload based on the hrefs.
|
|
|
|
</script>
|
|
@endpush |