257 lines
15 KiB
PHP
257 lines
15 KiB
PHP
@extends('layouts.admin')
|
|
|
|
@section('title', 'Data Anggota')
|
|
|
|
@section('content')
|
|
<div x-data="{ isModalAnggotaOpen: {{ ($errors->any() || request('add') == 'true') ? 'true' : 'false' }} }">
|
|
<x-page-header title="Data Anggota">
|
|
<x-slot name="actions">
|
|
<button @click="isModalAnggotaOpen = 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-xl shadow-lg shadow-blue-500/30 transition-all font-semibold flex items-center gap-2 transform hover:scale-105">
|
|
<i class="fas fa-user-plus"></i> Tambah Anggota
|
|
</button>
|
|
</x-slot>
|
|
</x-page-header>
|
|
|
|
<x-alert type="success" :message="session('success')" />
|
|
|
|
<div class="mb-6">
|
|
<form method="GET" action="{{ route('admin.anggota.member.index') }}" class="flex gap-2">
|
|
<x-text-input
|
|
type="text"
|
|
name="search"
|
|
value="{{ request('search') }}"
|
|
placeholder="Cari nama, no. identitas, atau KTP..."
|
|
class="w-full md:w-80"
|
|
/>
|
|
<x-primary-button>
|
|
Cari
|
|
</x-primary-button>
|
|
</form>
|
|
</div>
|
|
|
|
<x-card>
|
|
<x-table>
|
|
<x-slot name="head">
|
|
<x-th class="text-center w-12">No</x-th>
|
|
<x-th>Nama</x-th>
|
|
<x-th class="text-center">Jenis</x-th>
|
|
<x-th class="text-center">No. Identitas</x-th>
|
|
<x-th class="text-center">No. KTP</x-th>
|
|
<x-th class="text-center">No HP</x-th>
|
|
<x-th class="text-center">Wali</x-th>
|
|
<x-th class="text-center">Tanggal Dibuat</x-th>
|
|
<x-th class="text-center">Aksi</x-th>
|
|
</x-slot>
|
|
|
|
@forelse ($anggota as $a)
|
|
<tr class="hover:bg-gray-50 transition-colors">
|
|
<x-td class="text-center">
|
|
{{ $anggota->firstItem() + $loop->index }}
|
|
</x-td>
|
|
<x-td class="font-medium text-gray-900">
|
|
<div>{{ $a->nama }}</div>
|
|
@if($a->prodi)
|
|
<div class="text-xs text-gray-500">{{ $a->prodi }}</div>
|
|
@endif
|
|
</x-td>
|
|
<x-td class="text-center">
|
|
<x-badge :color="match($a->jenis_anggota) { 'Mahasiswa' => 'blue', 'Siswa' => 'green', 'Dosen' => 'purple', default => 'gray' }">
|
|
{{ $a->jenis_anggota }}
|
|
</x-badge>
|
|
</x-td>
|
|
<x-td class="text-center font-mono text-sm">
|
|
{{ $a->no_identitas }}
|
|
</x-td>
|
|
<x-td class="text-center text-sm">
|
|
{{ $a->no_ktp }}
|
|
</x-td>
|
|
<x-td class="text-center">
|
|
{{ $a->no_hp ?? '-' }}
|
|
</x-td>
|
|
<x-td class="text-center text-sm">
|
|
<div>{{ $a->nama_wali }}</div>
|
|
<div class="text-xs text-gray-500">{{ $a->hubungan_wali }}</div>
|
|
</x-td>
|
|
<x-td class="text-center text-sm text-gray-600">
|
|
{{ $a->created_at ? $a->created_at->format('d M Y') : '-' }}
|
|
</x-td>
|
|
<x-td class="text-center">
|
|
<div class="flex justify-center gap-3">
|
|
<x-action-button href="{{ route('admin.anggota.member.edit', $a->id) }}" variant="warning">
|
|
Edit
|
|
</x-action-button>
|
|
|
|
<form action="{{ route('admin.anggota.member.destroy', $a->id) }}"
|
|
method="POST"
|
|
onsubmit="return confirm('Yakin ingin menghapus data ini?')">
|
|
@csrf
|
|
@method('DELETE')
|
|
<button type="submit"
|
|
class="text-red-600 hover:text-red-900 font-medium transition duration-150 ease-in-out text-sm">
|
|
Hapus
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</x-td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<x-td colspan="9" class="text-center text-gray-500 py-8">
|
|
Data anggota tidak ditemukan
|
|
</x-td>
|
|
</tr>
|
|
@endforelse
|
|
</x-table>
|
|
|
|
<div class="mt-4">
|
|
{{ $anggota->withQueryString()->links() }}
|
|
</div>
|
|
</x-card>
|
|
<!-- MODAL TAMBAH ANGGOTA -->
|
|
<div x-show="isModalAnggotaOpen" 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">
|
|
<!-- Background overlay -->
|
|
<div x-show="isModalAnggotaOpen" x-transition.opacity class="fixed inset-0 transition-opacity bg-gray-900/60 backdrop-blur-sm" aria-hidden="true" @click="isModalAnggotaOpen = false"></div>
|
|
|
|
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>
|
|
|
|
<!-- Modal panel -->
|
|
<div x-show="isModalAnggotaOpen"
|
|
x-data="{ jenisAnggota: '{{ old('jenis_anggota', '') }}' }"
|
|
x-transition:enter="ease-out duration-300"
|
|
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"
|
|
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="inline-block px-4 pt-5 pb-4 overflow-hidden text-left align-bottom transition-all transform bg-white rounded-3xl shadow-2xl shadow-emerald-500/10 sm:my-8 sm:align-middle sm:max-w-4xl 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">Tambah Anggota Baru</h3>
|
|
<p class="text-sm text-gray-500 mt-1">Lengkapi informasi di bawah ini untuk mendaftarkan anggota keanggotaan perpustakaan.</p>
|
|
</div>
|
|
<button @click="isModalAnggotaOpen = 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>
|
|
|
|
@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" role="alert">
|
|
<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
|
|
|
|
<form action="{{ route('admin.anggota.member.store') }}" method="POST" class="space-y-8">
|
|
@csrf
|
|
|
|
{{-- Section 1: Data Identitas --}}
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b border-gray-200">
|
|
<span class="bg-blue-100 text-blue-700 px-2 py-1 rounded-md text-sm mr-2">1</span>
|
|
Data Identitas
|
|
</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div class="md:col-span-2">
|
|
<x-input-label for="nama" value="Nama Lengkap" />
|
|
<x-text-input id="nama" name="nama" type="text" class="mt-1 block w-full bg-gray-50/50" :value="old('nama')" placeholder="Masukkan nama lengkap" required />
|
|
</div>
|
|
|
|
<div>
|
|
<x-input-label for="jenis_anggota" value="Jenis Anggota" />
|
|
<select id="jenis_anggota" name="jenis_anggota" x-model="jenisAnggota" x-init="new TomSelect($el, { maxOptions: null })" class="mt-1 block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-xl shadow-sm bg-gray-50/50" required>
|
|
<option value="" disabled>-- Pilih Jenis --</option>
|
|
<option value="Mahasiswa">Mahasiswa</option>
|
|
<option value="Siswa">Siswa</option>
|
|
<option value="Dosen">Dosen</option>
|
|
<option value="Umum">Umum</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<x-input-label for="no_identitas" value="No. Identitas (NIM/NISN/NIP)" />
|
|
<x-text-input id="no_identitas" name="no_identitas" type="text" class="mt-1 block w-full bg-gray-50/50" :value="old('no_identitas')" placeholder="NIM / NISN / NIP" required />
|
|
</div>
|
|
|
|
<div>
|
|
<x-input-label for="no_ktp" value="No. KTP / NIK" />
|
|
<x-text-input id="no_ktp" name="no_ktp" type="text" class="mt-1 block w-full bg-gray-50/50" :value="old('no_ktp')" placeholder="16 digit NIK" maxlength="20" required />
|
|
</div>
|
|
|
|
<div x-show="jenisAnggota !== 'Umum'" x-transition>
|
|
<x-input-label for="prodi" value="Program Studi / Jurusan" />
|
|
<x-text-input id="prodi" name="prodi" type="text" class="mt-1 block w-full bg-gray-50/50" :value="old('prodi')" placeholder="Contoh: Teknik Informatika" x-bind:required="jenisAnggota !== 'Umum'" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Section 2: Data Kontak --}}
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b border-gray-200">
|
|
<span class="bg-green-100 text-green-700 px-2 py-1 rounded-md text-sm mr-2">2</span>
|
|
Data Kontak
|
|
</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<x-input-label for="no_hp" value="No. HP" />
|
|
<x-text-input id="no_hp" name="no_hp" type="number" class="mt-1 block w-full bg-gray-50/50" :value="old('no_hp')" placeholder="08xxxxxxxxx" required />
|
|
</div>
|
|
|
|
<div class="md:col-span-2">
|
|
<x-input-label for="alamat" value="Alamat Lengkap" />
|
|
<textarea id="alamat" name="alamat" rows="3" class="mt-1 block w-full rounded-xl border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm bg-gray-50/50" placeholder="Masukkan alamat lengkap" required>{{ old('alamat') }}</textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Section 3: Data Penanggung Jawab --}}
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b border-gray-200 flex items-center gap-2">
|
|
<span class="bg-orange-100 text-orange-700 px-2 py-1 rounded-md text-sm">3</span>
|
|
Data Penanggung Jawab / Wali
|
|
</h3>
|
|
<p class="text-xs text-gray-500 mb-4 italic pl-10 border-l-2 border-gray-200 ml-3">Digunakan sebagai penjamin apabila terjadi kehilangan atau kerusakan buku.</p>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<x-input-label for="nama_wali" value="Nama Wali / Penjamin" />
|
|
<x-text-input id="nama_wali" name="nama_wali" type="text" class="mt-1 block w-full bg-gray-50/50" :value="old('nama_wali')" placeholder="Nama orang tua / wali" required />
|
|
</div>
|
|
|
|
<div>
|
|
<x-input-label for="no_hp_wali" value="No. HP Wali" />
|
|
<x-text-input id="no_hp_wali" name="no_hp_wali" type="number" class="mt-1 block w-full bg-gray-50/50" :value="old('no_hp_wali')" placeholder="08xxxxxxxxx" required />
|
|
</div>
|
|
|
|
<div>
|
|
<x-input-label for="hubungan_wali" value="Hubungan" />
|
|
<select id="hubungan_wali" name="hubungan_wali" x-init="new TomSelect($el, { maxOptions: null })" class="mt-1 block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-xl shadow-sm bg-gray-50/50" required>
|
|
<option value="" disabled {{ old('hubungan_wali') ? '' : 'selected' }}>-- Pilih Hubungan --</option>
|
|
<option value="Orang Tua" {{ old('hubungan_wali') == 'Orang Tua' ? 'selected' : '' }}>Orang Tua</option>
|
|
<option value="Saudara" {{ old('hubungan_wali') == 'Saudara' ? 'selected' : '' }}>Saudara</option>
|
|
<option value="Dosen Wali" {{ old('hubungan_wali') == 'Dosen Wali' ? 'selected' : '' }}>Dosen Wali</option>
|
|
<option value="Lainnya" {{ old('hubungan_wali') == 'Lainnya' ? 'selected' : '' }}>Lainnya</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-end gap-3 pt-6 border-t border-gray-100 mt-8">
|
|
<button type="button" @click="isModalAnggotaOpen = 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">
|
|
<i class="fas fa-save mr-2"></i> Simpan Anggota
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|