135 lines
7.9 KiB
PHP
135 lines
7.9 KiB
PHP
@extends('layouts.admin')
|
|
|
|
@section('title', 'Manajemen Admin')
|
|
|
|
@section('content')
|
|
<div x-data="{ isModalOpen: false }" x-cloak>
|
|
<x-page-header title="Manajemen Akun Admin">
|
|
<x-slot name="actions">
|
|
<button @click="isModalOpen = true" class="bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white px-5 py-2.5 rounded-lg border border-transparent shadow-[0_4px_10px_rgba(37,99,235,0.2)] hover:shadow-[0_6px_15px_rgba(37,99,235,0.3)] transition-all font-semibold flex items-center gap-2 transform hover:translate-y-[-1px]">
|
|
<i class="fas fa-plus mr-1"></i> Tambah Admin
|
|
</button>
|
|
</x-slot>
|
|
</x-page-header>
|
|
|
|
<x-alert type="success" :message="session('success')" />
|
|
<x-alert type="error" :message="session('error')" />
|
|
|
|
@if ($errors->any())
|
|
<div class="bg-red-50 border-l-4 border-red-500 text-red-700 p-4 mb-6 rounded-r-xl text-sm shadow-sm">
|
|
<p class="font-bold mb-1"><i class="fas fa-exclamation-circle mr-1"></i> Validasi Gagal</p>
|
|
<ul class="list-disc ml-5 space-y-1">
|
|
@foreach ($errors->all() as $error)
|
|
<li>{{ $error }}</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
@endif
|
|
|
|
<x-card>
|
|
<x-table>
|
|
<x-slot name="head">
|
|
<x-th>Nama Admin</x-th>
|
|
<x-th>Email</x-th>
|
|
<x-th>Tanggal Terdaftar</x-th>
|
|
<x-th class="text-right">Aksi</x-th>
|
|
</x-slot>
|
|
|
|
@foreach($admins as $admin)
|
|
<tr class="hover:bg-gray-50 transition-colors">
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<div class="flex items-center">
|
|
<div class="w-8 h-8 rounded-full overflow-hidden border border-gray-200 mr-3">
|
|
<img src="https://ui-avatars.com/api/?name={{ urlencode($admin->name) }}&background=6366f1&color=fff" class="w-full h-full object-cover">
|
|
</div>
|
|
<div class="text-sm font-bold text-gray-900">{{ $admin->name }}</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
{{ $admin->email }}
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
{{ $admin->created_at->format('d M Y') }}
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
|
@if(auth()->id() !== $admin->id)
|
|
<form action="{{ route('admin.akun.destroy', $admin->id) }}" method="POST" class="inline-block" onsubmit="return confirm('Apakah Anda yakin ingin menghapus akun admin ini?');">
|
|
@csrf
|
|
@method('DELETE')
|
|
<button type="submit" class="bg-red-100 text-red-700 hover:bg-red-200 px-3 py-1.5 rounded text-xs font-bold transition flex items-center">
|
|
<i class="fas fa-trash-alt mr-1"></i> Hapus
|
|
</button>
|
|
</form>
|
|
@else
|
|
<span class="text-xs font-bold text-gray-400 bg-gray-100 px-3 py-1.5 rounded">Akun Anda</span>
|
|
@endif
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</x-table>
|
|
</x-card>
|
|
|
|
<!-- Modal Tambah Admin -->
|
|
<div x-show="isModalOpen" style="display: none;" class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
|
|
<div class="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
|
|
<div x-show="isModalOpen" x-transition.opacity class="fixed inset-0 transition-opacity bg-gray-900/60 backdrop-blur-sm" aria-hidden="true" @click="isModalOpen = false"></div>
|
|
|
|
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>
|
|
|
|
<div x-show="isModalOpen"
|
|
x-transition:enter="ease-out duration-300 transform"
|
|
x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
|
|
x-transition:leave="ease-in duration-200 transform"
|
|
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
|
|
x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
class="relative z-[60] inline-block px-4 pt-5 pb-4 overflow-hidden text-left align-bottom transition-all bg-white rounded-3xl shadow-2xl sm:my-8 sm:align-middle sm:max-w-xl sm:w-full sm:p-8 border border-gray-100">
|
|
|
|
<div class="flex justify-between items-center mb-6 pl-2">
|
|
<div>
|
|
<h3 class="text-2xl font-bold text-gray-900" id="modal-title">Pendaftaran Admin Baru</h3>
|
|
<p class="text-sm text-gray-500 mt-1">Buat akun untuk pengelola perpustakaan yang baru.</p>
|
|
</div>
|
|
<button @click="isModalOpen = false" class="w-10 h-10 rounded-full bg-gray-50 hover:bg-red-50 text-gray-400 hover:text-red-500 flex items-center justify-center transition-colors">
|
|
<i class="fas fa-times text-lg"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<form action="{{ route('admin.akun.store') }}" method="POST" class="space-y-5">
|
|
@csrf
|
|
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-1">Nama Lengkap</label>
|
|
<input type="text" name="name" value="{{ old('name') }}" placeholder="Masukkan nama..." class="w-full rounded-xl border-gray-300 focus:border-blue-500 focus:ring-blue-500 shadow-sm bg-gray-50/50" required>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-1">Email</label>
|
|
<input type="email" name="email" value="{{ old('email') }}" placeholder="admin@domain.com" class="w-full rounded-xl border-gray-300 focus:border-blue-500 focus:ring-blue-500 shadow-sm bg-gray-50/50" required>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-1">Password</label>
|
|
<input type="password" name="password" placeholder="Minimal 8 karakter" class="w-full rounded-xl border-gray-300 focus:border-blue-500 focus:ring-blue-500 shadow-sm bg-gray-50/50" required>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-1">Konfirmasi Password</label>
|
|
<input type="password" name="password_confirmation" placeholder="Ulangi password" class="w-full rounded-xl border-gray-300 focus:border-blue-500 focus:ring-blue-500 shadow-sm bg-gray-50/50" required>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-100 mt-6">
|
|
<button type="button" @click="isModalOpen = false" class="px-5 py-2.5 text-gray-600 bg-gray-100 hover:bg-gray-200 hover:text-gray-900 rounded-xl font-semibold transition-colors">
|
|
Batal
|
|
</button>
|
|
<button type="submit" class="bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white px-6 py-2.5 rounded-xl font-bold shadow-lg shadow-blue-500/30 transition-all transform hover:scale-105 flex items-center gap-2">
|
|
<i class="fas fa-check-circle"></i> Daftarkan Admin
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|