282 lines
17 KiB
PHP
282 lines
17 KiB
PHP
<x-app-layout>
|
|
<x-slot name="header">
|
|
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
|
|
{{ __('Tambah Santri') }}
|
|
</h2>
|
|
</x-slot>
|
|
|
|
<div class="py-12">
|
|
<div class="max-w-2xl mx-auto sm:px-6 lg:px-8">
|
|
<div class="bg-white overflow-hidden shadow-xl sm:rounded-2xl p-6">
|
|
|
|
{{-- Form Tambah Santri --}}
|
|
<form action="{{ route('santris.store') }}" method="POST">
|
|
@csrf
|
|
|
|
<!-- Personal Information -->
|
|
<div class="bg-gray-50 rounded-xl p-6 mb-8">
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-4">Informasi Pribadi</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">
|
|
Nama Lengkap <span class="text-red-600">*</span>
|
|
</label>
|
|
<input type="text" name="nama"
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
|
|
value="{{ old('nama') }}" required>
|
|
@error('nama')
|
|
<div class="text-red-600 text-sm mt-1">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">
|
|
NIS <span class="text-red-600">*</span>
|
|
</label>
|
|
<input type="text" name="nis"
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
|
|
value="{{ $nisBaru }}" readonly>
|
|
@error('nis')
|
|
<div class="text-red-600 text-sm mt-1">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">
|
|
Tempat Lahir <span class="text-red-600">*</span>
|
|
</label>
|
|
<input type="text" name="tempat_lahir"
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
|
|
value="{{ old('tempat_lahir') }}" required>
|
|
@error('tempat_lahir')
|
|
<div class="text-red-600 text-sm mt-1">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">
|
|
Tanggal Lahir <span class="text-red-600">*</span>
|
|
</label>
|
|
<input type="date" name="tanggal_lahir"
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
|
|
value="{{ old('tanggal_lahir') }}" required>
|
|
@error('tanggal_lahir')
|
|
<div class="text-red-600 text-sm mt-1">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">
|
|
Jenis Kelamin <span class="text-red-600">*</span>
|
|
</label>
|
|
<select name="jenis_kelamin"
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
|
|
required>
|
|
<option value="">Pilih Jenis Kelamin</option>
|
|
<option value="L" {{ old('jenis_kelamin') == 'L' ? 'selected' : '' }}>Laki-laki
|
|
</option>
|
|
<option value="P" {{ old('jenis_kelamin') == 'P' ? 'selected' : '' }}>Perempuan
|
|
</option>
|
|
</select>
|
|
@error('jenis_kelamin')
|
|
<div class="text-red-600 text-sm mt-1">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contact Information -->
|
|
<div class="bg-gray-50 rounded-xl p-6 mb-8">
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-4">Informasi Kontak</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">
|
|
Alamat <span class="text-red-600">*</span>
|
|
</label>
|
|
<textarea name="alamat" rows="3"
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
|
|
required>{{ old('alamat') }}</textarea>
|
|
@error('alamat')
|
|
<div class="text-red-600 text-sm mt-1">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">
|
|
No. Telepon <span class="text-red-600">*</span>
|
|
</label>
|
|
<input type="text" name="no_telp"
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
|
|
value="{{ old('no_telp') }}" required>
|
|
@error('no_telp')
|
|
<div class="text-red-600 text-sm mt-1">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Academic Information -->
|
|
<div class="bg-gray-50 rounded-xl p-6 mb-8">
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-4">Informasi Akademik</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">
|
|
Kelas <span class="text-red-600">*</span>
|
|
</label>
|
|
<select name="kelas_id"
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
|
|
required>
|
|
<option value="">Pilih Kelas</option>
|
|
@foreach($kelas as $k)
|
|
<option value="{{ $k->id }}" {{ old('kelas_id') == $k->id ? 'selected' : '' }}>
|
|
{{ $k->nama_kelas }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
@error('kelas_id')
|
|
<div class="text-red-600 text-sm mt-1">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">
|
|
Tahun Masuk <span class="text-red-600">*</span>
|
|
</label>
|
|
<input type="number" name="tahun_masuk"
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
|
|
value="{{ old('tahun_masuk') }}" min="2000" max="2030" required>
|
|
@error('tahun_masuk')
|
|
<div class="text-red-600 text-sm mt-1">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Photo Upload -->
|
|
<div class="bg-gray-50 rounded-xl p-6 mb-8">
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-4">Foto</h3>
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Foto</label>
|
|
<input type="file" name="foto" accept="image/*"
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg">
|
|
@error('foto')
|
|
<div class="text-red-600 text-sm mt-1">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
|
|
<!-- User Information -->
|
|
<div class="bg-gray-50 rounded-xl p-6 mb-8">
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-4">Informasi User</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">
|
|
Username <span class="text-red-600">*</span>
|
|
</label>
|
|
<input type="text" name="username"
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-slate-500 focus:border-slate-500 transition-colors"
|
|
value="{{ $nisBaru }}" readonly>
|
|
@error('username')
|
|
<div class="text-red-600 text-sm mt-1">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">
|
|
Role <span class="text-red-600">*</span>
|
|
</label>
|
|
<select name="role"
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-slate-500 focus:border-slate-500 transition-colors"
|
|
required>
|
|
<option value="santri" {{ old('role') == 'santri' ? 'selected' : '' }}>Santri
|
|
</option>
|
|
</select>
|
|
@error('role')
|
|
<div class="text-red-600 text-sm mt-1">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-xl p-6 mb-8">
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-4">Informasi Password</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
|
|
<div class="relative">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">
|
|
Password <span class="text-red-600">*</span>
|
|
</label>
|
|
<input type="password" id="passwordField" name="password"
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-slate-500 focus:border-slate-500 transition-colors"
|
|
value="{{ 12345678 }}" readonly>
|
|
|
|
<!-- Tombol untuk toggle -->
|
|
<button type="button" onclick="togglePassword()"
|
|
class="absolute right-3 top-10 text-gray-500 hover:text-gray-700">
|
|
👁
|
|
</button>
|
|
|
|
@error('password')
|
|
<div class="text-red-600 text-sm mt-1">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
<div class="relative">
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">
|
|
Konfirmasi Password <span class="text-red-600">*</span>
|
|
</label>
|
|
<input type="password" name="password_confirmation"
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-slate-500 focus:border-slate-500 transition-colors"
|
|
value="12345678" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4">
|
|
<p class="text-sm text-gray-600">Password minimal 8 karakter dengan kombinasi huruf dan
|
|
angka</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Account Status -->
|
|
<div class="bg-gray-50 rounded-xl p-6 mb-8">
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-4">Status Akun</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">
|
|
Status Akun <span class="text-red-600">*</span>
|
|
</label>
|
|
<select name="is_active"
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-slate-500 focus:border-slate-500 transition-colors"
|
|
required>
|
|
<option value="1" {{ old('is_active', '1') == '1' ? 'selected' : '' }}>Aktif
|
|
</option>
|
|
<option value="0" {{ old('is_active') == '0' ? 'selected' : '' }}>Tidak Aktif
|
|
</option>
|
|
</select>
|
|
@error('is_active')
|
|
<div class="text-red-600 text-sm mt-1">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="flex items-center justify-end space-x-4 pt-6 border-t border-gray-200">
|
|
<a href="{{ route('santris.index') }}"
|
|
class="inline-flex items-center px-6 py-3 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors">
|
|
<i class="fas fa-arrow-left mr-2"></i>
|
|
Kembali
|
|
</a>
|
|
<button type="submit"
|
|
class="inline-flex items-center px-6 py-3 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors">
|
|
<i class="fas fa-save mr-2"></i>
|
|
Simpan Santri
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</x-app-layout>
|
|
|
|
<script>
|
|
function togglePassword() {
|
|
const passwordField = document.getElementById("passwordField");
|
|
if (passwordField.type === "password") {
|
|
passwordField.type = "text";
|
|
} else {
|
|
passwordField.type = "password";
|
|
}
|
|
}
|
|
</script> |