154 lines
9.2 KiB
PHP
154 lines
9.2 KiB
PHP
@extends('layouts.admin')
|
|
|
|
@section('title', 'Tambah Anggota')
|
|
|
|
@section('content')
|
|
<x-page-header title="Tambah Anggota Baru" />
|
|
|
|
<x-card class="max-w-3xl mx-auto">
|
|
<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-4">
|
|
<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" :value="old('nama')" placeholder="Masukkan nama lengkap" required autofocus />
|
|
<x-input-error class="mt-2" :messages="$errors->get('nama')" />
|
|
</div>
|
|
|
|
<div>
|
|
<x-input-label for="jenis_anggota" value="Jenis Anggota" />
|
|
<select id="jenis_anggota" name="jenis_anggota" x-data 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 onchange="toggleProdi()">
|
|
<option value="" disabled {{ old('jenis_anggota') ? '' : 'selected' }}>-- Pilih Jenis --</option>
|
|
<option value="Mahasiswa" {{ old('jenis_anggota') == 'Mahasiswa' ? 'selected' : '' }}>Mahasiswa</option>
|
|
<option value="Siswa" {{ old('jenis_anggota') == 'Siswa' ? 'selected' : '' }}>Siswa</option>
|
|
<option value="Dosen" {{ old('jenis_anggota') == 'Dosen' ? 'selected' : '' }}>Dosen</option>
|
|
<option value="Umum" {{ old('jenis_anggota') == 'Umum' ? 'selected' : '' }}>Umum</option>
|
|
</select>
|
|
<x-input-error class="mt-2" :messages="$errors->get('jenis_anggota')" />
|
|
</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" :value="old('no_identitas')" placeholder="NIM / NISN / NIP" required />
|
|
<x-input-error class="mt-2" :messages="$errors->get('no_identitas')" />
|
|
</div>
|
|
|
|
<div>
|
|
<x-input-label for="no_ktp" id="label_no_ktp" value="No. KTP / NIK" />
|
|
<x-text-input id="no_ktp" name="no_ktp" type="text" class="mt-1 block w-full" :value="old('no_ktp')" placeholder="16 digit NIK" maxlength="20" required />
|
|
<p id="help_no_ktp" class="text-xs text-gray-500 mt-1">Masukkan 16 digit NIK KTP</p>
|
|
<x-input-error class="mt-2" :messages="$errors->get('no_ktp')" />
|
|
</div>
|
|
|
|
<div id="prodi-field">
|
|
<x-input-label for="prodi" value="Program Studi / Jurusan" />
|
|
<x-text-input id="prodi" name="prodi" type="text" class="mt-1 block w-full" :value="old('prodi')" placeholder="Contoh: Teknik Informatika" />
|
|
<x-input-error class="mt-2" :messages="$errors->get('prodi')" />
|
|
</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-4">
|
|
<div>
|
|
<x-input-label for="no_hp" value="No. HP" />
|
|
<x-text-input id="no_hp" name="no_hp" type="text" class="mt-1 block w-full" :value="old('no_hp')" placeholder="08xxxxxxxxx" required />
|
|
<x-input-error class="mt-2" :messages="$errors->get('no_hp')" />
|
|
</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 border border-gray-200 bg-gray-50 text-gray-900 text-sm rounded-xl focus:ring-blue-500 focus:border-blue-500 p-3 shadow-sm hover:bg-white transition-all duration-200 outline-none" placeholder="Masukkan alamat lengkap" required>{{ old('alamat') }}</textarea>
|
|
<x-input-error class="mt-2" :messages="$errors->get('alamat')" />
|
|
</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">
|
|
<span class="bg-orange-100 text-orange-700 px-2 py-1 rounded-md text-sm mr-2">3</span>
|
|
Data Penanggung Jawab / Wali
|
|
</h3>
|
|
<p class="text-xs text-gray-500 mb-4">Digunakan sebagai penjamin apabila terjadi kehilangan atau kerusakan buku.</p>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<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" :value="old('nama_wali')" placeholder="Nama orang tua / wali" required />
|
|
<x-input-error class="mt-2" :messages="$errors->get('nama_wali')" />
|
|
</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="text" class="mt-1 block w-full" :value="old('no_hp_wali')" placeholder="08xxxxxxxxx" required />
|
|
<x-input-error class="mt-2" :messages="$errors->get('no_hp_wali')" />
|
|
</div>
|
|
|
|
<div>
|
|
<x-input-label for="hubungan_wali" value="Hubungan" />
|
|
<select id="hubungan_wali" name="hubungan_wali" x-data 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>
|
|
<x-input-error class="mt-2" :messages="$errors->get('hubungan_wali')" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-end gap-4 pt-4 border-t border-gray-200">
|
|
<a href="{{ route('admin.anggota.member.index') }}" class="text-gray-600 hover:text-gray-900 font-medium text-sm">
|
|
Batal
|
|
</a>
|
|
<x-primary-button>
|
|
Simpan Anggota
|
|
</x-primary-button>
|
|
</div>
|
|
</form>
|
|
</x-card>
|
|
|
|
<script>
|
|
function toggleProdi() {
|
|
const jenis = document.getElementById('jenis_anggota').value;
|
|
const prodiField = document.getElementById('prodi-field');
|
|
const labelNoKtp = document.getElementById('label_no_ktp');
|
|
const helpNoKtp = document.getElementById('help_no_ktp');
|
|
const inputNoKtp = document.getElementById('no_ktp');
|
|
|
|
if (jenis === 'Umum') {
|
|
prodiField.style.display = 'none';
|
|
document.getElementById('prodi').value = '';
|
|
} else {
|
|
prodiField.style.display = 'block';
|
|
}
|
|
|
|
// Logika Dynamic Form untuk Identitas Siswa / Pelajar
|
|
if (jenis === 'Siswa') {
|
|
labelNoKtp.innerText = 'No. Identitas (NISN / KIA)';
|
|
helpNoKtp.innerText = 'Masukkan Nomor Induk Siswa Nasional atau Kartu Identitas Anak';
|
|
inputNoKtp.placeholder = '10-16 digit NISN / KIA';
|
|
} else {
|
|
labelNoKtp.innerText = 'No. Identitas KTP';
|
|
helpNoKtp.innerText = 'Masukkan 16 digit NIK KTP';
|
|
inputNoKtp.placeholder = '16 digit NIK';
|
|
}
|
|
}
|
|
// Run on load
|
|
document.addEventListener('DOMContentLoaded', toggleProdi);
|
|
</script>
|
|
@endsection
|