<x-guru-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Tambah pelanggaran') }}
        </h2>
    </x-slot>

    <div class="py-10">
        <div class="max-w-2xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white shadow-xl rounded-xl p-8">
                <form action="{{ route('pelanggarans.store') }}" method="POST" id="form-pelanggaran">
                    @csrf

                    {{-- Santri --}}
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-green-800 mb-2">Santri</label>
                        <select name="santri_id" class="form-select w-full border-green-400 focus:ring-green-500" required>
                            <option value="">Pilih Santri</option>
                            @foreach($santris as $santri)
                                <option value="{{ $santri->id }}" {{ old('santri_id') == $santri->id ? 'selected' : '' }}>
                                    {{ $santri->nama }}
                                </option>
                            @endforeach
                        </select>
                        @error('santri_id') <p class="text-red-600 text-sm mt-1">{{ $message }}</p> @enderror
                    </div>

                    {{-- Kelas --}}
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-green-800 mb-2">Kelas</label>
                        <select name="kelas_id" class="form-select w-full border-green-400 focus:ring-green-500" 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') <p class="text-red-600 text-sm mt-1">{{ $message }}</p> @enderror
                    </div>

                    {{-- Jenis Pelanggaran --}}
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-green-800 mb-2">Jenis Pelanggaran</label>
                        <input type="text" name="jenis_pelanggaran" class="form-input w-full border-green-400 focus:ring-green-500"
                            value="{{ old('jenis_pelanggaran') }}" required>
                        @error('jenis_pelanggaran') <p class="text-red-600 text-sm mt-1">{{ $message }}</p> @enderror
                    </div>

                    {{-- Hukuman --}}
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-green-800 mb-2">Hukuman</label>
                        <select name="hukuman" class="form-select w-full border-green-400 focus:ring-green-500" required>
                            <option value="">Pilih Hukuman</option>
                            @foreach(['Teguran Lisan', 'Teguran Tertulis', 'Skorsing', 'Lainnya'] as $option)
                                <option value="{{ $option }}" {{ old('hukuman') == $option ? 'selected' : '' }}>
                                    {{ $option }}
                                </option>
                            @endforeach
                        </select>
                        @error('hukuman') <p class="text-red-600 text-sm mt-1">{{ $message }}</p> @enderror
                    </div>

                    {{-- Keterangan Hukuman --}}
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-green-800 mb-2">Keterangan Hukuman</label>
                        <textarea name="keterangan_hukuman" rows="3" class="form-textarea w-full border-green-400 focus:ring-green-500">{{ old('keterangan_hukuman') }}</textarea>
                        @error('keterangan_hukuman') <p class="text-red-600 text-sm mt-1">{{ $message }}</p> @enderror
                    </div>

                    {{-- Hukuman Selesai --}}
                    <input type="checkbox" name="hukuman_selesai" value="1" 
    {{ old('hukuman_selesai') ? 'checked' : '' }}
    class="h-4 w-4 text-green-600 focus:ring-green-500 border-green-400 rounded">


                    {{-- Tombol --}}
                    <div class="flex justify-end">
                        <a href="{{ route('pelanggarans.index') }}" class="px-4 py-2 rounded bg-yellow-400 text-black font-semibold hover:bg-yellow-500 mr-3">Kembali</a>
                        <button type="submit" class="px-4 py-2 rounded bg-green-600 text-white font-semibold hover:bg-green-700">Simpan</button>
                    </div>
                </form>
            </div>
        </div>
    </div> 
</x-guru-layout>