@extends('layouts.app')

@section('content')
<div class="page-header">
    <h4><i class="bi bi-person-plus-fill me-2" style="color:#1565c0;"></i>Tambah Siswa Baru</h4>
    <p>Silakan isi formulir di bawah ini dengan lengkap sesuai kolom database sekolah.</p>
</div>

<div class="card card-table p-4" style="border-radius: 14px; border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);">

    {{-- Notifikasi Error Validasi --}}
    @if($errors->any())
    <div class="alert alert-danger py-2" style="border-radius: 8px; font-size: 0.875rem;">
        <ul class="mb-0 ps-3">
            @foreach($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    {{-- Form Kirim Data --}}
    <form action="{{ route('siswa.store') }}" method="POST">
        @csrf

        <div class="row g-3">
            {{-- Input NISN --}}
            <div class="col-md-6">
                <label for="nisn" class="form-label small fw-semibold text-secondary">NISN</label>
                <input type="text" name="nisn" id="nisn" class="form-control" value="{{ old('nisn') }}"
                    placeholder="Contoh: 0012345678" required autofocus>
            </div>

            {{-- Input Nama Lengkap --}}
            <div class="col-md-6">
                <label for="nama" class="form-label small fw-semibold text-secondary">Nama Lengkap</label>
                <input type="text" name="nama" id="nama" class="form-control" value="{{ old('nama') }}"
                    placeholder="Masukkan nama lengkap siswa" required>
            </div>

            {{-- Input Kelas (KOLOM BARU) --}}
            <div class="col-md-6">
                <label for="kelas" class="form-label small fw-semibold text-secondary">Kelas</label>
                <input type="text" name="kelas" id="kelas" class="form-control" value="{{ old('kelas') }}"
                    placeholder="Contoh: XII-RPL-1 atau X-IPA-3" required>
            </div>

            {{-- Input Jenis Kelamin --}}
            <div class="col-md-6">
                <label for="jenis_kelamin" class="form-label small fw-semibold text-secondary">Jenis Kelamin</label>
                <select name="jenis_kelamin" id="jenis_kelamin" class="form-select" required>
                    <option value="">-- Pilih --</option>
                    <option value="Laki-laki" {{ old('jenis_kelamin')=='Laki-laki' ? 'selected' : '' }}>Laki-laki
                    </option>
                    <option value="Perempuan" {{ old('jenis_kelamin')=='Perempuan' ? 'selected' : '' }}>Perempuan
                    </option>
                </select>
            </div>

            {{-- Input Alamat Rumah (KOLOM BARU) --}}
            <div class="col-12">
                <label for="alamat" class="form-label small fw-semibold text-secondary">Alamat Rumah Lengkap</label>
                <textarea name="alamat" id="alamat" class="form-control" rows="3"
                    placeholder="Masukkan alamat tempat tinggal siswa sekarang..."
                    required>{{ old('alamat') }}</textarea>
            </div>
        </div>

        {{-- Tombol Aksi --}}
        <div class="mt-4 pt-3 border-top d-flex gap-2">
            <button type="submit" class="btn btn-primary d-flex align-items-center gap-2">
                <i class="bi bi-save"></i> Simpan Data
            </button>
            <a href="{{ route('siswa.index') }}" class="btn btn-light border">Batal</a>
        </div>
    </form>
</div>
@endsection