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

    <div class="py-12">
        <div class="max-w-2xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white shadow-xl sm:rounded-2xl overflow-hidden">
                <div class="p-8">
                    <h2 class="text-2xl font-bold text-gray-800 mb-6">Tambah Alumni Baru</h2>

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

                        <!-- Nama Santri -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-2">Nama Santri</label>
                            <input type="text" name="nama_santri"
                                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-violet-500"
                                value="{{ old('nama_santri') }}" required>
                            @error('nama_santri')
                                <div class="text-red-600 text-sm mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Tahun Lulus -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-2">Tahun Lulus</label>
                            <input type="number" name="tahun_lulus" min="2000" max="2100"
                                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-violet-500"
                                value="{{ old('tahun_lulus') }}" required>
                            @error('tahun_lulus')
                                <div class="text-red-600 text-sm mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Aktivitas Setelah Lulus -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-2">Aktivitas Setelah Lulus</label>
                            <input type="text" name="aktivitas_setelah_lulus"
                                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-violet-500"
                                value="{{ old('aktivitas_setelah_lulus') }}" required>
                            @error('aktivitas_setelah_lulus')
                                <div class="text-red-600 text-sm mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Kontak -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-2">Kontak</label>
                            <input type="text" name="kontak"
                                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-violet-500"
                                value="{{ old('kontak') }}">
                            @error('kontak')
                                <div class="text-red-600 text-sm mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Keterangan -->
                        <div class="mb-6">
                            <label class="block text-sm font-medium text-gray-700 mb-2">Keterangan</label>
                            <textarea name="keterangan" rows="3"
                                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-violet-500">{{ old('keterangan') }}</textarea>
                            @error('keterangan')
                                <div class="text-red-600 text-sm mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Actions -->
                        <div class="flex justify-end space-x-3">
                            <a href="{{ route('alumnis.index') }}"
                                class="px-6 py-3 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200">
                                Batal
                            </a>
                            <button type="submit"
                                class="px-6 py-3 text-sm font-medium text-white bg-violet-600 rounded-lg hover:bg-violet-700">
                                Simpan
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>