TKK_E3220375/resources/views/admin/siswa/create.blade.php

261 lines
17 KiB
PHP

@extends('layouts.dashboard')
@section('title', 'Smart School | Pendaftaran Siswa Baru')
@section('content')
<div class="container mx-auto px-4 py-8">
<!-- Header Section -->
<div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8">
<div>
<h1 class="text-2xl font-bold text-gray-800 flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-3 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
Pendaftaran Siswa Baru
</h1>
<p class="text-gray-600 mt-2">Lengkapi formulir pendaftaran siswa dengan data yang valid</p>
</div>
<div class="mt-4 md:mt-0">
<a href="{{ route('admin.siswa.index') }}"
class="flex items-center px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
</svg>
Kembali ke Daftar Siswa
</a>
</div>
</div>
<!-- Form Card -->
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<!-- Form Progress -->
<div class="bg-gray-50 px-6 py-4 border-b border-gray-200">
<div class="flex items-center">
<div class="flex items-center text-indigo-600">
<div class="flex items-center justify-center w-8 h-8 rounded-full bg-indigo-100">
<span class="text-sm font-medium">1</span>
</div>
<div class="ml-2 text-sm font-medium">Data Pribadi</div>
</div>
<div class="flex-auto border-t-2 border-gray-200 mx-4"></div>
<div class="flex items-center text-gray-500">
<div class="flex items-center justify-center w-8 h-8 rounded-full bg-gray-100">
<span class="text-sm font-medium">2</span>
</div>
<div class="ml-2 text-sm font-medium">Data Akademik</div>
</div>
</div>
</div>
<!-- Form Content -->
<form id="createSiswaForm" action="{{ route('admin.siswa.store') }}" method="POST" enctype="multipart/form-data" class="p-6">
@csrf
<!-- Section 1: Data Pribadi -->
<div class="mb-8">
<h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
Data Pribadi
</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Foto Profil -->
<div class="md:col-span-1">
<div class="flex flex-col items-center">
<div class="relative mb-4">
<div id="imagePreview" class="w-40 h-40 rounded-lg bg-gray-100 border-2 border-dashed border-gray-300 overflow-hidden flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
</div>
<label for="foto_siswa" class="absolute bottom-0 right-0 bg-white p-2 rounded-full shadow-md cursor-pointer hover:bg-gray-50 transition">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
<input type="file" id="foto_siswa" name="foto_siswa" class="hidden" accept="image/*" required>
</label>
</div>
<p class="text-xs text-gray-500 text-center">Format: JPG/PNG (Max 2MB)<br>Rasio 1:1 (persegi)</p>
@error('foto_siswa')
<p class="mt-1 text-xs text-red-600 text-center">{{ $message }}</p>
@enderror
</div>
</div>
<!-- Data Pribadi -->
<div class="md:col-span-2 space-y-4">
<div>
<label for="nama_siswa" class="block text-sm font-medium text-gray-700 mb-1">Nama Lengkap <span class="text-red-500">*</span></label>
<input type="text" id="nama_siswa" name="nama_siswa" required
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
value="{{ old('nama_siswa') }}" placeholder="Masukkan nama lengkap">
@error('nama_siswa')
<p class="mt-1 text-xs text-red-600">{{ $message }}</p>
@enderror
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="nisn" class="block text-sm font-medium text-gray-700 mb-1">NISN <span class="text-red-500">*</span></label>
<input type="number" id="nisn" name="nisn" required
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
value="{{ old('nisn') }}" placeholder="Nomor Induk Siswa Nasional">
@error('nisn')
<p class="mt-1 text-xs text-red-600">{{ $message }}</p>
@enderror
</div>
<div>
<label for="tanggal_lahir" class="block text-sm font-medium text-gray-700 mb-1">Tanggal Lahir <span class="text-red-500">*</span></label>
<input type="date" id="tanggal_lahir" name="tanggal_lahir" required
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
value="{{ old('tanggal_lahir') }}">
@error('tanggal_lahir')
<p class="mt-1 text-xs text-red-600">{{ $message }}</p>
@enderror
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Jenis Kelamin <span class="text-red-500">*</span></label>
<div class="mt-1 flex space-x-4">
<label class="inline-flex items-center">
<input type="radio" name="jenis_kelamin" value="L" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300" required
{{ old('jenis_kelamin', 'L') == 'L' ? 'checked' : '' }}>
<span class="ml-2 text-sm text-gray-700">Laki-laki</span>
</label>
<label class="inline-flex items-center">
<input type="radio" name="jenis_kelamin" value="P" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300"
{{ old('jenis_kelamin') == 'P' ? 'checked' : '' }}>
<span class="ml-2 text-sm text-gray-700">Perempuan</span>
</label>
</div>
@error('jenis_kelamin')
<p class="mt-1 text-xs text-red-600">{{ $message }}</p>
@enderror
</div>
</div>
</div>
</div>
<!-- Section 2: Data Kontak -->
<div class="mb-8">
<h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
Data Kontak
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email <span class="text-red-500">*</span></label>
<input type="email" id="email" name="email" required
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
value="{{ old('email') }}" placeholder="email@contoh.com">
@error('email')
<p class="mt-1 text-xs text-red-600">{{ $message }}</p>
@enderror
</div>
<div>
<label for="no_hp" class="block text-sm font-medium text-gray-700 mb-1">Nomor HP <span class="text-red-500">*</span></label>
<input type="tel" id="no_hp" name="no_hp" required
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
value="{{ old('no_hp') }}" placeholder="0812-3456-7890">
@error('no_hp')
<p class="mt-1 text-xs text-red-600">{{ $message }}</p>
@enderror
</div>
<div class="md:col-span-2">
<label for="alamat" class="block text-sm font-medium text-gray-700 mb-1">Alamat Lengkap <span class="text-red-500">*</span></label>
<textarea id="alamat" name="alamat" rows="3" required
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
placeholder="Jl. Contoh No. 123, Kota/Kabupaten">{{ old('alamat') }}</textarea>
@error('alamat')
<p class="mt-1 text-xs text-red-600">{{ $message }}</p>
@enderror
</div>
</div>
</div>
<!-- Section 3: Data Akademik -->
<div class="mb-8">
<h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
</svg>
Data Akademik
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label for="id_kelas" class="block text-sm font-medium text-gray-700 mb-1">Kelas <span class="text-red-500">*</span></label>
<select id="id_kelas" name="id_kelas" required
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
<option value="">-- Pilih Kelas --</option>
@foreach($kelas as $item)
<option value="{{ $item->id }}" {{ old('id_kelas') == $item->id ? 'selected' : '' }}>
{{ $item->nama_kelas }}
</option>
@endforeach
</select>
@error('id_kelas')
<p class="mt-1 text-xs text-red-600">{{ $message }}</p>
@enderror
</div>
<div>
<label for="id_jurusan" class="block text-sm font-medium text-gray-700 mb-1">Jurusan <span class="text-red-500">*</span></label>
<select id="id_jurusan" name="id_jurusan" required
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
<option value="">-- Pilih Jurusan --</option>
@foreach($jurusan as $item)
<option value="{{ $item->id }}" {{ old('id_jurusan') == $item->id ? 'selected' : '' }}>
{{ $item->nama_jurusan }}
</option>
@endforeach
</select>
@error('id_jurusan')
<p class="mt-1 text-xs text-red-600">{{ $message }}</p>
@enderror
</div>
</div>
</div>
<!-- Form Actions -->
<div class="flex justify-end space-x-3 border-t border-gray-200 pt-6">
<button type="reset" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Reset Form
</button>
<button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" />
</svg>
Simpan Data Siswa
</button>
</div>
</form>
</div>
</div>
<script>
// Preview image upload
document.getElementById('foto_siswa').addEventListener('change', function(e) {
const preview = document.getElementById('imagePreview');
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = function(e) {
preview.innerHTML = `<img src="${e.target.result}" class="w-full h-full object-cover" alt="Preview">`;
}
if (file) {
reader.readAsDataURL(file);
}
});
</script>
@endsection