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

    <div class="py-12">
        <div class="max-w-4xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 bg-white border-b border-gray-200">

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

                        <!-- Nama -->
                        <div class="mb-4">
                            <label for="nama" class="block text-sm font-medium text-gray-700">Nama Guru</label>
                            <input type="text" name="nama" id="nama"
                                class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2"
                                value="{{ old('nama') }}" required>
                            @error('nama')
                                <div class="text-sm text-red-500">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- CODE_GURU -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Kode Guru</label>
                            <input type="text" name="code_guru"
                                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-colors"
                                value="{{ $codeGuruBaru }}" readonly>
                            @error('code_guru')
                                <div class="text-red-600 text-sm mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Alamat -->
                        <div class="mb-4">
                            <label for="alamat" class="block text-sm font-medium text-gray-700">Alamat</label>
                            <input type="text" name="alamat" id="alamat"
                                class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2"
                                value="{{ old('alamat') }}">
                        </div>

                        <!-- Tanggal Lahir -->
                        <div class="mb-4">
                            <label for="tanggal_lahir" class="block text-sm font-medium text-gray-700">Tanggal
                                Lahir</label>
                            <input type="date" name="tanggal_lahir" id="tanggal_lahir"
                                class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2"
                                value="{{ old('tanggal_lahir') }}">
                        </div>

                        <!-- Jenis Kelamin -->
                        <div class="mb-4">
                            <label for="jenis_kelamin" class="block text-sm font-medium text-gray-700">Jenis
                                Kelamin</label>
                            <select name="jenis_kelamin" id="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') == 'L' ? 'selected' : '' }}>Laki-laki</option>
                                <option value="P" {{ old('jenis_kelamin') == 'P' ? 'selected' : '' }}>Perempuan</option>
                            </select>
                        </div>

                        <!-- Username -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                Username <span class="text-red-600">*</span>
                            </label>
                            <input type="text" name="username"
                                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-slate-500 focus:border-slate-500 transition-colors"
                                value="{{ $codeGuruBaru }}" readonly>
                            @error('username')
                                <div class="text-red-600 text-sm mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Password -->
                        <div class="bg-gray-50 rounded-xl p-6 mb-8">
                            <h3 class="text-lg font-semibold text-gray-800 mb-4">Informasi Password</h3>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div class="relative">
                                    <label class="block text-sm font-medium text-gray-700 mb-2">
                                        Password <span class="text-red-600">*</span>
                                    </label>
                                    <input type="password" id="passwordField" name="password"
                                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-slate-500 focus:border-slate-500 transition-colors"
                                        value="{{ 12345678 }}" readonly>

                                    <!-- Tombol untuk toggle -->
                                    <button type="button" onclick="togglePassword()"
                                        class="absolute right-3 top-10 text-gray-500 hover:text-gray-700">
                                        👁
                                    </button>

                                    @error('password')
                                        <div class="text-red-600 text-sm mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="relative">
                                    <label class="block text-sm font-medium text-gray-700 mb-2">
                                        Konfirmasi Password <span class="text-red-600">*</span>
                                    </label>
                                    <input type="password" name="password_confirmation"
                                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-slate-500 focus:border-slate-500 transition-colors"
                                        value="12345678" readonly>
                                </div>
                            </div>
                            <div class="mt-4">
                                <p class="text-sm text-gray-600">Password minimal 8 karakter dengan kombinasi huruf dan
                                    angka</p>
                            </div>
                        </div>

                        <!-- Tombol Simpan -->
                        <div class="mt-6">
                            <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
                                Simpan
                            </button>
                        </div>

                    </form>

                </div>
            </div>
        </div>
    </div>
</x-app-layout>