<x-app-layout>
    <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 text-gray-900">
                    <h1 class="text-2xl font-bold mb-6">Add Teacher</h1>

                    <form method="POST" action="{{ route('admin.teachers.store') }}" enctype="multipart/form-data" class="space-y-6">
                        @csrf

						<!-- Name -->
						<div>
							<label for="name" class="block font-medium text-sm text-gray-700">
								Name
							</label>
							<input id="name" type="text" name="name" class="form-input mt-1 block w-full" required />
						</div>

						<!-- Email -->
						<div>
							<label for="email" class="block font-medium text-sm text-gray-700">
								Email
							</label>
							<input id="email" type="email" name="email" class="form-input mt-1 block w-full" required />
						</div>

						<!-- Password -->
						<div>
							<label for="password" class="block font-medium text-sm text-gray-700">
								Password
							</label>
							<input id="password" type="password" name="password" class="form-input mt-1 block w-full" required />
						</div>

                        <!-- Bio -->
                        <div>
                            <label for="bio" class="block font-medium text-sm text-gray-700">
                                Bio
                            </label>
                            <textarea id="bio" name="bio" rows="4" class="form-textarea mt-1 block w-full"></textarea>
                        </div>

                        <!-- Picture -->
                        <div>
                            <label for="picture" class="block font-medium text-sm text-gray-700">
                                Profile Picture
                            </label>
                            <input id="picture" type="file" name="picture" class="mt-1 block w-full" />
                            <p class="text-sm text-gray-500 mt-1">Leave empty to use the default placeholder.</p>
                        </div>

                        <!-- Location -->
                        <div>
                            <label for="location" class="block font-medium text-sm text-gray-700">
                                Location
                            </label>
                            <input id="location" type="text" name="location" class="form-input mt-1 block w-full" />
                        </div>

                        <!-- Hourly rate -->
                        <div>
                            <label for="hourly_rate" class="block font-medium text-sm text-gray-700">
                                Hourly Rate (£)
                            </label>
                            <input id="hourly_rate" type="number" step="0.01" name="hourly_rate"
                                   class="form-input mt-1 block w-full" />
                        </div>

						<!-- Subjects -->
						<div>
							<label for="subjects" class="block font-medium text-sm text-gray-700">
								Subjects
							</label>
							<select id="subjects" name="subjects[]" multiple class="form-multiselect mt-1 block w-full">
								@foreach($subjects as $subject)
									<option value="{{ $subject->id }}">{{ $subject->name }}</option>
								@endforeach
							</select>
							<p class="text-sm text-gray-500 mt-1">Hold Ctrl (Windows) or Command (Mac) to select multiple.</p>
						</div>

						<!-- Levels -->
						<div>
							<label for="levels" class="block font-medium text-sm text-gray-700">
								Levels
							</label>
							<select id="levels" name="levels[]" multiple class="form-multiselect mt-1 block w-full">
								@foreach($levels as $level)
									<option value="{{ $level->id }}">{{ $level->name }}</option>
								@endforeach
							</select>
							<p class="text-sm text-gray-500 mt-1">Hold Ctrl (Windows) or Command (Mac) to select multiple.</p>
						</div>	

                        <!-- Submit -->
                        <div>
                            <button type="submit" class="btn btn-primary">
                                Save Teacher
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>