@extends('layouts.admin')

@section('title', 'Add Teacher')

@section('content')
	<form action="{{ route('admin.teachers.store') }}" method="post" style="max-width:760px;">
		@csrf
		<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
			<div>
				<label>User</label>
				<select name="user_id" style="display:block;width:100%;border:1px solid #e5e7eb;padding:8px 10px;border-radius:6px;">
					@foreach($users as $u)
						<option value="{{ $u->id }}" @selected(old('user_id')==$u->id)>{{ $u->name }} ({{ $u->email }})</option>
					@endforeach
				</select>
				@error('user_id')<div style="color:#b91c1c;">{{ $message }}</div>@enderror
			</div>
			<div></div>
			<div>
				<label>First name</label>
				<input type="text" name="first_name" value="{{ old('first_name') }}" style="display:block;width:100%;border:1px solid #e5e7eb;padding:8px 10px;border-radius:6px;">
				@error('first_name')<div style="color:#b91c1c;">{{ $message }}</div>@enderror
			</div>
			<div>
				<label>Last name</label>
				<input type="text" name="last_name" value="{{ old('last_name') }}" style="display:block;width:100%;border:1px solid #e5e7eb;padding:8px 10px;border-radius:6px;">
				@error('last_name')<div style="color:#b91c1c;">{{ $message }}</div>@enderror
			</div>
			<div>
				<label>Phone</label>
				<input type="text" name="phone" value="{{ old('phone') }}" style="display:block;width:100%;border:1px solid #e5e7eb;padding:8px 10px;border-radius:6px;">
			</div>
			<div>
				<label>Gender</label>
				<input type="text" name="gender" value="{{ old('gender') }}" style="display:block;width:100%;border:1px solid #e5e7eb;padding:8px 10px;border-radius:6px;">
			</div>
			<div>
				<label>Date of birth</label>
				<input type="date" name="date_of_birth" value="{{ old('date_of_birth') }}" style="display:block;width:100%;border:1px solid #e5e7eb;padding:8px 10px;border-radius:6px;">
			</div>
			<div>
				<label>Address</label>
				<input type="text" name="address" value="{{ old('address') }}" style="display:block;width:100%;border:1px solid #e5e7eb;padding:8px 10px;border-radius:6px;">
			</div>
		</div>

		<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px;">
			<div>
				<label>Classes</label>
				<select name="class_ids[]" multiple size="8" style="display:block;width:100%;border:1px solid #e5e7eb;padding:8px 10px;border-radius:6px;">
					@foreach($classes as $c)
						<option value="{{ $c->id }}" @selected(collect(old('class_ids',[]))->contains($c->id))>Grade {{ $c->grade }}</option>
					@endforeach
				</select>
			</div>
			<div>
				<label>Subjects</label>
				<select name="subject_ids[]" multiple size="8" style="display:block;width:100%;border:1px solid #e5e7eb;padding:8px 10px;border-radius:6px;">
					@foreach($subjects as $s)
						<option value="{{ $s->id }}" @selected(collect(old('subject_ids',[]))->contains($s->id))>{{ $s->name }}</option>
					@endforeach
				</select>
			</div>
		</div>

		<div style="margin-top:16px;">
			<button style="padding:10px 14px;border-radius:6px;background:#0ea5e9;color:#fff;">Create</button>
			<a href="{{ route('admin.teachers.index') }}" style="padding:10px 14px;border-radius:6px;border:1px solid #e5e7eb;background:#fff;text-decoration:none;">Cancel</a>
		</div>
	</form>
@endsection