@extends('layouts.guru')
@section('content')
<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-7xl mx-auto sm:px-6 lg:px-8">
        <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
            <div class="p-6">
                <form action="{{ route('santris.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="space-y-4">
                        <div>
                            <label for="nama" class="block font-medium text-sm text-gray-700">Nama Lengkap Santri</label>
                            <input type="text" name="nama" id="nama" class="w-full border-gray-300 focus:border-primary focus:ring-primary rounded-lg shadow-sm" value="{{ old('nama') }}" required>
                            @error('nama')<div class="text-red-600 text-sm mt-1">{{ $message }}</div>@enderror
                        </div>

                        <hr class="my-6">
                        <p class="font-semibold">Informasi Akun</p>

                        <div>
                            <label for="username" class="block font-medium text-sm text-gray-700">Username</label>
                            <input type="text" name="username" id="username" class="w-full border-gray-300 focus:border-primary focus:ring-primary rounded-lg shadow-sm" value="{{ old('username') }}" required>
                            @error('username')<div class="text-red-600 text-sm mt-1">{{ $message }}</div>@enderror
                        </div>

                        <div>
                            <label for="password" class="block font-medium text-sm text-gray-700">Password</label>
                            <input type="password" name="password" id="password" class="w-full border-gray-300 focus:border-primary focus:ring-primary rounded-lg shadow-sm" required>
                            @error('password')<div class="text-red-600 text-sm mt-1">{{ $message }}</div>@enderror
                        </div>

                        <div>
                            <label for="password_confirmation" class="block font-medium text-sm text-gray-700">Konfirmasi Password</label>
                            <input type="password" name="password_confirmation" id="password_confirmation" class="w-full border-gray-300 focus:border-primary focus:ring-primary rounded-lg shadow-sm" required>
                        </div>

                        <hr class="my-6">
                        <p class="font-semibold">Detail Informasi Santri</p>

                        <div>
                            <label for="nis" class="block font-medium text-sm text-gray-700">NIS</label>
                            <input type="text" name="nis" id="nis" class="w-full border-gray-300 focus:border-primary focus:ring-primary rounded-lg shadow-sm" value="{{ old('nis') }}" required>
                            @error('nis')<div class="text-red-600 text-sm mt-1">{{ $message }}</div>@enderror
                        </div>
                        <div>
                            <label for="kelas_id" class="block font-medium text-sm text-gray-700">Kelas</label>
                            <select name="kelas_id" id="kelas_id" class="w-full border-gray-300 focus:border-primary focus:ring-primary rounded-lg shadow-sm" 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 for="alamat" class="block font-medium text-sm text-gray-700">Alamat</label>
                            <input type="text" name="alamat" id="alamat" class="w-full border-gray-300 focus:border-primary focus:ring-primary rounded-lg shadow-sm" value="{{ old('alamat') }}">
                            @error('alamat')<div class="text-red-600 text-sm mt-1">{{ $message }}</div>@enderror
                        </div>
                        <div>
                            <label for="tanggal_lahir" class="block font-medium text-sm text-gray-700">Tanggal Lahir</label>
                            <input type="date" name="tanggal_lahir" id="tanggal_lahir" class="w-full border-gray-300 focus:border-primary focus:ring-primary rounded-lg shadow-sm" value="{{ old('tanggal_lahir') }}">
                            @error('tanggal_lahir')<div class="text-red-600 text-sm mt-1">{{ $message }}</div>@enderror
                        </div>
                        <div>
                            <label for="jenis_kelamin" class="block font-medium text-sm text-gray-700">Jenis Kelamin</label>
                            <select name="jenis_kelamin" id="jenis_kelamin" class="w-full border-gray-300 focus:border-primary focus:ring-primary rounded-lg shadow-sm" required>
                                <option value="">Pilih</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 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 class="flex justify-end gap-2 pt-4">
                            <a href="{{ route('santris.index') }}" class="btn-secondary">Kembali</a>
                            <button type="submit" class="btn-primary">Simpan</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection