<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Tambah Catatan Kesehatan') }}
        </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">
                <div class="p-8">
                    <h2 class="text-2xl font-bold text-gray-800 mb-4">Form Catatan Kesehatan</h2>

                    <form action="{{ route('catatan_kesehatans.store') }}" method="POST">
                        @csrf

                        {{-- Santri --}}
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Santri</label>
                            <select name="santri_id" required class="w-full border-gray-300 rounded">
                                <option value="">Pilih Santri</option>
                                @foreach ($santris as $s)
                                    <option value="{{ $s->id }}" {{ old('santri_id') == $s->id ? 'selected' : '' }}>{{ $s->nama }}</option>
                                @endforeach
                            </select>
                            @error('santri_id') <small class="text-red-600">{{ $message }}</small> @enderror
                        </div>

                        {{-- Kelas --}}
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Kelas</label>
                            <select name="kelas_id" required class="w-full border-gray-300 rounded">
                                <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') <small class="text-red-600">{{ $message }}</small> @enderror
                        </div>

                        {{-- Keluhan --}}
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Keluhan</label>
                            <textarea name="keluhan" required rows="2" class="w-full border-gray-300 rounded">{{ old('keluhan') }}</textarea>
                            @error('keluhan') <small class="text-red-600">{{ $message }}</small> @enderror
                        </div>

                        {{-- Diagnosis --}}
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Diagnosis</label>
                            <textarea name="diagnosis" required rows="2" class="w-full border-gray-300 rounded">{{ old('diagnosis') }}</textarea>
                            @error('diagnosis') <small class="text-red-600">{{ $message }}</small> @enderror
                        </div>

                        {{-- Saran (optional) --}}
                        <div class="mb-6">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Saran</label>
                            <textarea name="saran" rows="2" class="w-full border-gray-300 rounded">{{ old('saran') }}</textarea>
                            @error('saran') <small class="text-red-600">{{ $message }}</small> @enderror
                        </div>

                        {{-- Tombol --}}
                        <div class="flex justify-end gap-3 border-t pt-4">
                            <a href="{{ route('catatan_kesehatans.index') }}" class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded text-sm">Kembali</a>
                            <button type="submit" class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded text-sm">Simpan</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
