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

    <form action="{{ route('guru.profile.update') }}" method="POST" enctype="multipart/form-data" class="bg-white p-6 rounded-lg shadow-md space-y-5">
        @csrf

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block font-medium text-gray-700">Nama</label>
                <input type="text" name="nama" value="{{ old('nama', $guru->nama) }}" 
                       class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" required>
                @error('nama') <p class="text-red-500 text-sm mt-1">{{ $message }}</p> @enderror
            </div>

            <div>
                <label class="block font-medium text-gray-700">NIP / Code Guru</label>
                <input type="text" name="code_guru" 
                       value="{{ old('code_guru', $guru->code_guru) }}" 
                       class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 bg-gray-100 cursor-not-allowed" 
                       readonly>
                <p class="text-xs text-gray-500 mt-1">Kode guru tidak dapat diubah.</p>
                @error('code_guru') <p class="text-red-500 text-sm mt-1">{{ $message }}</p> @enderror
            </div>

            <div>
                <label class="block font-medium text-gray-700">Alamat</label>
                <input type="text" name="alamat" value="{{ old('alamat', $guru->alamat) }}" 
                       class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2">
                @error('alamat') <p class="text-red-500 text-sm mt-1">{{ $message }}</p> @enderror
            </div>

            <div>
                <label class="block font-medium text-gray-700">Tanggal Lahir</label>
                <input type="date" name="tanggal_lahir" value="{{ old('tanggal_lahir', $guru->tanggal_lahir) }}" 
                       class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2">
                @error('tanggal_lahir') <p class="text-red-500 text-sm mt-1">{{ $message }}</p> @enderror
            </div>

            <div>
                <label class="block font-medium text-gray-700">Jenis Kelamin</label>
                <select name="jenis_kelamin" 
                        class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" required>
                    <option value="">Pilih</option>
                    <option value="L" {{ old('jenis_kelamin', $guru->jenis_kelamin) == 'L' ? 'selected' : '' }}>Laki-laki</option>
                    <option value="P" {{ old('jenis_kelamin', $guru->jenis_kelamin) == 'P' ? 'selected' : '' }}>Perempuan</option>
                </select>
                @error('jenis_kelamin') <p class="text-red-500 text-sm mt-1">{{ $message }}</p> @enderror
            </div>

            <div>
                <label class="block font-medium text-gray-700">Foto Profil</label>
                <input type="file" name="foto" 
                       class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2">
                @if($guru->foto)
                    <img src="{{ asset('storage/foto_guru/'.$guru->foto) }}" 
                         alt="Foto Guru" 
                         class="w-24 h-24 mt-2 rounded-full shadow">
                @endif
                @error('foto') <p class="text-red-500 text-sm mt-1">{{ $message }}</p> @enderror
            </div>
        </div>

        <div class="flex justify-end gap-3 pt-6">
            <a href="{{ route('guru.profile') }}" 
               class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded">
                Batal
            </a>
            <button type="submit" 
                    class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded shadow">
                Simpan
            </button>
        </div>
    </form>
</x-guru-layout>
